This is a great concept, although on my custom theme it is a bit different. Can you help me find where to place the code?
Here is my vbcms_content_article_preview code
Code:
{vb:raw css}
<div class="article_preview">
<vb:if condition="$showtitle">
<div class="title">
<h3 class="article_preview">
<a href="{vb:raw page_url}"><span>{vb:raw title}</span></a>
<vb:if condition="$can_edit">
<a class="edit" href="{vb:raw edit_url}">
<img class="editimage" src="{vb:stylevar imgdir_cms}/edit_small.png" alt="{vb:rawphrase edit}" />
</a>
</vb:if>
</h3>
</div>
</vb:if>
<vb:if condition="$showuser OR $showpublishdate OR ($showupdated AND $lastupdated) OR ($viewcount AND $showviewcount) OR ($showrating AND $rating!='')">
<div class="cms_article_username">
<vb:if condition="$showuser">
{vb:rawphrase by_x_nolink, {vb:raw memberaction_dropdown}}
</vb:if>
<vb:if condition="$showpublishdate">
<vb:if condition="!$published OR !$setpublish">
<span style="color:red">
<vb:if condition="$publishdate AND $setpublish">
{vb:rawphrase page_will_be_published_x {vb:raw publishdatelocal}} {vb:raw publishtimelocal}
<vb:else />
{vb:rawphrase page_not_published}
</vb:if>
</span>
<vb:elseif condition="$publishdate" />
{vb:rawphrase published_on_x {vb:raw publishdatelocal}} {vb:raw publishtimelocal}
</vb:if>
</vb:if>
<vb:if condition="$showupdated and $lastupdated">
{vb:rawphrase updated_on_x {vb:date {vb:raw lastupdated}, {vb:raw dateformat}}}
</vb:if>
<vb:if condition="$viewcount AND $showviewcount">
{vb:rawphrase number_of_views}: {vb:raw viewcount}
</vb:if>
<vb:if condition="$showrating">
<span class="cmsrating rating{vb:raw rating}"></span>
</vb:if>
</div>
</vb:if>
<vb:if condition="!empty($categories)">
<div class="cms_article_section_location">
<ol class="commalist">
<li>{vb:phrase in_category}</li>
<vb:each from="categories" key="categoryid" value="category">
<li><a href="{vb:raw category.category_url}">{vb:raw category.category}</a>{vb:raw category.comma}</li>
</vb:each>
</ol>
</div>
</vb:if>
<vb:comment>
<!-- Display Section Location -->
<div class="cms_article_section_location">
{vb:rawphrase section}: <a href="{vb:raw section_url}">{vb:var parenttitle}</a>
</div>
</vb:comment>
<div class="fullwidth article_preview_contents<vb:if condition="$showpreviewonly"> showpreviewonly</vb:if> restore">
<vb:if condition="$showpreviewonly">
<vb:if condition="$previewvideo">
{vb:raw previewvideo}
<vb:elseif condition="$previewimage" />
<a href="{vb:raw page_url}">
<img class="cms_article_preview_image" src="{vb:raw previewimage}" alt="<vb:if condition="$attachment_settings['alt']">{vb:raw attachment_settings['alt']}<vb:else />{vb:rawphrase article_preview}</vb:if>" <vb:if condition="$attachment_settings['title']">title="{vb:raw attachment_settings['title']}"</vb:if> /></a>
</vb:if>
</vb:if>
<div>
<br />
<div class="cms_article_txt_content postcontainer">
{vb:raw previewtext}
<vb:if condition="$preview_chopped">...</vb:if>
</div>
</div>
</div>
<div class="fullwidth">
<vb:if condition="$preview_chopped">
<span class="cms_article_readmore"><a href="{vb:raw page_url}">{vb:rawphrase read_more_phrase} <img src="{vb:stylevar imgdir_cms}/read_more-{vb:stylevar right}.png" alt="{vb:rawphrase read_more_phrase}" /></a>
</span>
</vb:if>
<vb:if condition="$comment_count">
<span class="cms_article_comment_number">
<a href="{vb:raw newcomment_url}"><img class="inlineimg" src="{vb:stylevar imgdir_button}/firstnew-comment.png" alt="{vb:rawphrase go_to_first_new_comment}" /></a>
<a href="{vb:raw newcomment_url}" rel="nofollow">{vb:raw comment_count}
<vb:if condition="$comment_count == 1">
{vb:rawphrase comment}
<vb:else />{vb:rawphrase comments}
</vb:if></a>
</span>
</vb:if>
</div>
</div>