CMS Layout

[Steve038]

Hi guys, I'm wanting to change the layout of my CMS Home page slightly. Here is the Home page for my site: www.theroaringseason.com

Currently, I have the layout set with the latest CMS article at the top with a single large image, then the older articles dropping in underneath of 3x2 columns.

I'm happy with this layout, however, I was wanting to change the way each of the individual layouts are set. Currently, they have the article title name at the top, then the author beneath that, plus the date etc, and beneath that they have the picture or video with the article text next to and beneath the picture.

Am I able to change these so the image is at the top, with the article name, then author beneath, then the article text beneath that? The only reason I want to do this is to make the page look tidier, as the images aren't horizontally aligned with each other if one has a larger article title than the other. If one article has a title that requires two lines, it pushes the picture down another line, so it looks a bit messy.

Sorry, I know its only an aesthetic thing, but I'd really like this page to look tidier than it currently is. Here is an example of a nice clean look that I'd like to achieve: www.jalopyjournal.com

Is this possible to do, and how do I achieve this?

I also would like the thumbnail images to be larger than they currently are. I've set their sizes at 350pixels, then clicked to rebuild attachment thumbnails, but they are still smaller than 350pix for some reason.

[Lynne]

The previews are all spit out in the template vbcms_content_article_preview. So, modify that template to be the way you want.

[Steve038]

Hi Lynne, thanks for your help. So if this is the info in my vbcms_content_article_preview as below, what do I change here to move the image in the article previews to be above everything else, ie, image at the top, article name beneath image, author beneath article name etc?

And also, how do I make the preview image so its 350pix? I've set the Thumbnail Size within Message Attachment Options to 350pix wide, but they're appearing smaller than this on the page. They look more like about 210pix.


{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>&nbsp;
<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">
&nbsp;{vb:rawphrase updated_on_x {vb:date {vb:raw lastupdated}, {vb:raw dateformat}}}&nbsp;
</vb:if>

<vb:if condition="$viewcount AND $showviewcount">
&nbsp;{vb:rawphrase number_of_views}: {vb:raw viewcount}&nbsp;
</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>{vbhrase 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>

[Lynne]

I would suggest you create a new style that you can play with and play with the template there.

The image part of the code is here

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

[Steve038]

Hi again Lynne, thanks for your help, I'll do as you've suggested. Thanks again.

--------------- Added [DATE]1334906612[/DATE] at [TIME]1334906612[/TIME] ---------------

Lynne, that section of code you've highlighted above, am I able to change the order in which the preview image, article title, author etc are displayed by working in that section?

[Lynne]

The section of code I posted is only for the image. The article tile and author, etc, are all in the code you posted - you should be able to easily find them. Then just arrange everything how you want it.

[Steve038]

Thanks again Lynne, OK I'll go through it and hopefully it'll work out. If I keep a copy of the original code, can I revert back to this if the changes I make mess things up?

[Lynne]

Sure. You can always hit the Revert button also. And, you can always see the default template by going to edit the modified template and clicking the View Default button on the left.

[Steve038]

Thanks again Lynne, I've been messing around with it today as you've suggested and have been able to move the preview images above the headings etc, so am making good progress. I appreciate all your help.

If I want my preview images to all be, for example, 350pix wide x 200pix high, what would I add/change to this code to achieve that:

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

[Lynne]

After you have your template created, then you would write some CSS to style it and that would include CSS to make your image a certain size.