Thumbnail Images

[Blade-uk]

Ok so i have a widget called featured content and i have copied the template code from vbcms_widget_recentarticle_page and created a new template called vbcms_widget_recentarticle_page_featured and pointed my featured content widget at it.

You can see it in action at the top of the page on www.eteknix.com

This is the code for it:

<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
<h3>{vb:raw widget_title}</h3>
</div>
<div class="cms_widget_content widget_content">
<vb:each from="articles" key="contentid" value="article">
<div class="cms_widget_post_bit widget_post_bit">
<div class="cms_widget_post_comment widget_post_comment">
<h4 style="margin-left: -35px;" class="cms_widget_post_header widget_post_header"><a href="{vb:raw article.page_url}">{vb:raw article.title}</a></h4>

<vb:if condition="$article['tags']"></vb:if>
</div>
</div>
</vb:each>
</div>
</div>

What i want to do now is to have a thumbnail to go with each article but i can't for the life of me work out the code needed.

Also i would much prefer a horizontal list as opposed to the vertical list of articles as it's currently set out.

Any ideas?

Thanks,

Andy

[Post Reader]

as far as i can say but not confirmed look at this code but it'll show a same image on all news


<a href="{vb:raw article.page_url}">{vb:raw article.title}</a>

[Blade-uk]

Tried tinkering around myself, but am unsure on the syntax to use.

Anyone able to help?

[Blade-uk]

Wow it seems this site really is dying. I asked on vb.com and they told me to come here but was afraid to due to the site dying, so now i'm stuck with something that doesn't have the functionality i need.

[Dead Eddie]

What i want to do now is to have a thumbnail to go with each article but i can't for the life of me work out the code needed.


This'll display the preview image associated with the article.


<img src="{vb:raw article.previewimage}" width="{vb:raw article.imagewidth}" height="{vb:raw article.imageheight}" />

[Blade-uk]

This'll display the preview image associated with the article.


<img src="{vb:raw article.previewimage}" width="{vb:raw article.imagewidth}" height="{vb:raw article.imageheight}" />


Eddie you are a legend.

Only problems i have now is that i've had to make it 100x60 as it was WAY too big for that box but now it looks odd as the images are all different sizes so don't end up square. How can i sort that so it uses the imagewidth and heigh as mentioned in the settings but at a 40% reduction or something so the thumbnails are the right aspect ratio?

Also here is my code:

<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
<h3>{vb:raw widget_title}</h3>
</div>
<div class="cms_widget_content widget_content">
<vb:each from="articles" key="contentid" value="article">
<div class="cms_widget_post_bit widget_post_bit">
<div class="cms_widget_post_comment widget_post_comment">
<h4 style="margin-left: -35px;" class="cms_widget_post_header widget_post_header"><a href="{vb:raw article.page_url}"> <img src="{vb:raw article.previewimage}" width="100px" height="60px" />{vb:raw article.title}</a></h4>

<vb:if condition="$article['tags']"></vb:if>
</div>
</div>
</vb:each>
</div>
</div>

How can i have it so i have two columns as there is a big white space on the right of the widget box.

Many thanks,

Andy

[Dead Eddie]

<img src="{vb:raw article.previewimage}" width="{vb:math {vb:raw article.imagewidth} / 2}" height="{vb:math {vb:raw article.imageheight} / 2}" />

You can adjust the proportions as you need, just as long as they stay the same between the two options. And remember, you're not actually resizing the image, you're adjusting the size that the page is using to display it. By default, the CMS doesn't do a very good job with thumbnails...

As for your other issue, sorry. Tried it, but CSS isn't my strong suite.

[Jokorey]

Dead Eddie - thank you for pointing me here :) I'm having an issue getting this to work, or maybe I'm not understanding the functionality properly. Could you shed some light on this for me? How do I associate a preview image with an article? I feel like this is a 'duh' question, but I am pretty lost on this. Also, where should I insert this code? I may or may not have a problem with this, instead it may just be I don't have a preview image associated with the article. Right now, I have an article that has an image attached to it, and when that happens, my goal is to have a preview of that image shown in the widget. Here is my code:


<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
<h3> <a href="LINK">{vb:raw widget_title}</a></h3>
</div>
<div class="cms_widget_content widget_content">
<vb:each from="articles" key="contentid" value="article">
<div class="cms_widget_post_bit widget_post_bit">
<div class="cms_widget_post_userinfo widget_post_userinfo">
<div class="cms_widget_post_useravatar widget_post_useravatar">
<vb:if condition="$article['showuser'] OR $article['settingsforboth'] == 2">
<vb:if condition="$article['avatar']">
<a class="comments_member_avatar_link" href="{vb:link member, {vb:raw article}}"><img alt="{vb:raw article.username}" src="{vb:raw vboptions.bburl}/{vb:raw article.avatar.0}" {vb:raw article.avatar.1} /></a>
<vb:else />
<img alt="{vb:raw article.username}" src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
<vb:else />
<img alt="" src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
</div>
</div>
<div class="cms_widget_post_comment widget_post_comment">
<vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
<h4 class="cms_widget_post_header widget_post_header"><a href="{vb:raw article.page_url}">{vb:raw article.title}</a></h4>
</vb:if>
<div class="cms_widget_post_content widget_post_content">{vb:raw article.previewtext}... <a href="{vb:raw article.page_url}">{vb:rawphrase read_more}</a></div>
<vb:if condition="$article['showuser'] OR $article['settingsforboth'] == 2">
<a href="{vb:link member, {vb:raw article}}" class="username">{vb:raw article.username}</a>
</vb:if>
<a href="{vb:raw article.page_url}" class="lastpostdate understate" title="{vb:rawphrase go_to_last_post}"><vb:if condition="$article['showpublishdate'] OR $article['settingsforboth'] == 2">{vb:date {vb:raw article.publishdate}, {vb:raw vboptions.dateformat}}<vb:if condition="!$show['detailedtime']">, <span class="time">{vb:date {vb:raw article.publishdate} {vb:raw vboptions.timeformat}}</span></vb:if></vb:if></a>
<vb:comment>
<div class="searchcat">
<h4 class="searchlastpostlabel understate">{vb:rawphrase content} :</h4>
<span class="understate">{vb:rawphrase article}</span>
</div>
</vb:comment>

<vb:if condition="$article['categories']">
<div class="searchstats">
<h4 class="searchlastpostlabel">{vb:rawphrase categories}: </h4>
<vb:each from="article['categories']" key="categoryid" value="category">
<a href="{vb:raw category.category_url}">{vb:raw category.category}</a>&nbsp;
</vb:each>
</div>
</vb:if>

<vb:if condition="$article['tags']">
<div class="searchstats">
{vb:rawphrase tags}:
<vb:each from="article['tags']" key="tagid" value="tagtext">
<a href="{vb:raw vboptions.bburl}/tags.php?tagid={vb:raw tagid}">{vb:raw tagtext}</a>&nbsp;
</vb:each>
</div>
</vb:if>
</div>

</div>
</vb:each>
</div>
</div>
</div>

[Dead Eddie]

How do I associate a preview image with an article?

The preview image is associated when you save an article. Typically, it's either the first one attached or embedded in the article (it's also what displays on the section/category pages).

Also, where should I insert this code?

Simple answer is "Insert it where you want it to show up". :)

I've attached an idea of where I'd start (although, I haven't previewed this, so the display may be wonky...try it on a test board!). I've bolded my edits, in case you're looking for them.


<div class="cms_widget">
<div class="block">
<div class="cms_widget_header">
<h3> <a href="LINK">{vb:raw widget_title}</a></h3>
</div>
<div class="cms_widget_content widget_content">
<vb:each from="articles" key="contentid" value="article">
<div class="cms_widget_post_bit widget_post_bit">
<div class="cms_widget_post_userinfo widget_post_userinfo">
<div class="cms_widget_post_useravatar widget_post_useravatar">
<vb:if condition="$article['showuser'] OR $article['settingsforboth'] == 2">
<vb:if condition="$article['avatar']">
<a class="comments_member_avatar_link" href="{vb:link member, {vb:raw article}}"><img alt="{vb:raw article.username}" src="{vb:raw vboptions.bburl}/{vb:raw article.avatar.0}" {vb:raw article.avatar.1} /></a>
<vb:else />
<img alt="{vb:raw article.username}" src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
<vb:else />
<img alt="" src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
</div>
</div>
<div class="cms_widget_post_comment widget_post_comment">
<vb:if condition="$article['showtitle'] OR $article['settingsforboth'] == 2">
<h4 class="cms_widget_post_header widget_post_header"><a href="{vb:raw article.page_url}">{vb:raw article.title}</a></h4>
</vb:if>
<div class="cms_widget_post_content widget_post_content"><vb:if condition="$article['previewimage']"><img src="{vb:raw article.previewimage}" width="{vb:math {vb:raw article.imagewidth} / 2}" height="{vb:math {vb:raw article.imageheight} / 2}" /></vb:if>
{vb:raw article.previewtext}... <a href="{vb:raw article.page_url}">{vb:rawphrase read_more}</a></div>
<vb:if condition="$article['showuser'] OR $article['settingsforboth'] == 2">
<a href="{vb:link member, {vb:raw article}}" class="username">{vb:raw article.username}</a>
</vb:if>
<a href="{vb:raw article.page_url}" class="lastpostdate understate" title="{vb:rawphrase go_to_last_post}"><vb:if condition="$article['showpublishdate'] OR $article['settingsforboth'] == 2">{vb:date {vb:raw article.publishdate}, {vb:raw vboptions.dateformat}}<vb:if condition="!$show['detailedtime']">, <span class="time">{vb:date {vb:raw article.publishdate} {vb:raw vboptions.timeformat}}</span></vb:if></vb:if></a>
<vb:comment>
<div class="searchcat">
<h4 class="searchlastpostlabel understate">{vb:rawphrase content} :</h4>
<span class="understate">{vb:rawphrase article}</span>
</div>
</vb:comment>

<vb:if condition="$article['categories']">
<div class="searchstats">
<h4 class="searchlastpostlabel">{vb:rawphrase categories}: </h4>
<vb:each from="article['categories']" key="categoryid" value="category">
<a href="{vb:raw category.category_url}">{vb:raw category.category}</a>&nbsp;
</vb:each>
</div>
</vb:if>

<vb:if condition="$article['tags']">
<div class="searchstats">
{vb:rawphrase tags}:
<vb:each from="article['tags']" key="tagid" value="tagtext">
<a href="{vb:raw vboptions.bburl}/tags.php?tagid={vb:raw tagid}">{vb:raw tagtext}</a>&nbsp;
</vb:each>
</div>
</vb:if>
</div>

</div>
</vb:each>
</div>
</div>
</div>

[Jokorey]

Thanks Eddie - this works as intended perfectly! I'm curious about one thing though...when we are talking about image size, the /# is an indicator of the ratio, not a fixed size, right? Is there a way to code in a fixed size so my contributors don't have to worry about using a specific image size? Or am I way off base?

[Dead Eddie]

Sure. width="100" height="100".

You just want to make sure the images are the correct proportion. Nothing worse than taking an image that's 75 by 300 and resizing it to 100 by 100. ;)

[johnnymc7]

Dead Eddie thanks for that code its exactly what Ive been searching for!!! Is there anyway i can make the text go to the rightside of the image I used your code on my website www.irishdrumandbass.com

Thanks John

[Dead Eddie]

Answered the PM, but I'll poke my head in here, too. Better late than never, eh?

Change the image tag to this:

<img src="{vb:raw article.previewimage}" width="{vb:math {vb:raw article.imagewidth} / 2}" height="{vb:math {vb:raw article.imageheight} / 2}" style="float:left;">

(Or whatever you used in the height/width properties)