vb.org Archive - Thumbnail Images

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)

- - Thumbnail Images (https://vborg.vbsupport.ru/showthread.php?t=266850)

Thumbnail Images

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:

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}">{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

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

Code:

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

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

Anyone able to help?

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.

Quote:

Originally Posted by Blade-uk (Post 2220679)

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.

Code:

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

Quote:

Originally Posted by Dead Eddie (Post 2221524)

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

Code:

<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:

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

Code:

<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.

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:

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>

Quote:

Originally Posted by Jokorey (Post 2273068)

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).

Quote:

Originally Posted by Jokorey (Post 2273068)

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.

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: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>

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?

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (8)bbcode_code_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01396 seconds Memory Usage 1,827KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (8)bbcode_code_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: