Full image on CMS home page and text below image

[fwulfers]

The default is showing a thumbnail of 150px and the intro to the article starting to the right of the thumbnail.

I would like to show the first full image of the article (usually 640px on our site) and the text starting below the picture on the CMS home page. Something similar as they have on Autoblog.com.

I know how to adjust the size of the thumbnail to a larger size but how to make the text start below the image?

[Attitude5ire]

There is an option in CMS to show full images instead of thumbnails.. should be in content management settings

[fwulfers]

Thanks for the response. I already have it set to No:

Set this to yes to switch the article previews to use image thumbnails rather than resizing the full images. Thumbnails must be enabled for this option to have any effect.

But the size of preview images are still controlled by the attachment_image_thumbnail_max settings under Attachments in the stylevar.

This stylevar controls the maximum size of inline attached images whose size is set to "Thumbnail" in their Image Settings.

Doesn't make sense..

[chrisngrod]

That is true...

.cms_article_preview_image {
max-height:{vb:stylevar attachment_image_thumbnail_max};
max-width:{vb:stylevar attachment_image_thumbnail_max} !important;
}

Hard code some numbers in there?

vbcms.css

[fwulfers]

That is possible but that's the same as changing the value in the stylevar. And I still need the preview text to start below the image, not to the side.

[chrisngrod]

That is possible but that's the same as changing the value in the stylevar. And I still need the preview text to start below the image, not to the side.

Sorry I think I only read the last posts. Went back and looked at OP.

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

to this...


<img src="{vb:raw previewimage}" width="650" 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>
<br />


Even doing something simple like this seems to work. You could tweak the code to your needs.

[fwulfers]

Brilliant, that is perfect and looks great. http://saabworld.net/content/

Some articles do have smaller pictures so those are being stretched out to 650px. Is there a way to set it so smaller images than the specified width (650px here) will display their original size?

[chrisngrod]

Looked at your site...

How big do your images get? You could take the width out, but this could have a negative impact if your users have a high res screen.

Have you ever thought about going fixed width just for the CMS portion? (example is my site)


You could add something like this to vbcms.css or additional.css if you have that plugin...


.myarticlepreview {
max-height: 450px;
max-width: 650px !important;
display: block;
margin-left: auto;
margin-right: auto;
margin-top:15px;
}


Configure your max settings... When the image isn't larger than that, it won't resize. Change what you did earlier to (vbcms_content_article_preview).



<img class="myarticlepreview" 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>
<br />


Oh yeah that puts us back to where we started at... Also in vbcms.css... Comment this out like so...

.cms_article_preview_image,
.showpreviewonly object,
.showpreviewonly iframe {
border:{vb:stylevar vbcms_article_preview_image_border};
outline: {vb:stylevar vbcms_article_preview_image_outline};
/* float:{vb:stylevar left}; */
margin:{vb:stylevar vbcms_article_preview_image_margin};
}


Guess we have to fix the videos as well...

vbcms_article_preview_object_size (stylevar) - Change to whatever sizes you want.

I tried to center up the video, but unless I used <center></center> it didn't work (that has been depreciated and most people will say don't use it... however I think there is going to be compatibility for a long time). I have a fixed width CMS so it won't affect me as much. Your video will probably show up aligned to the left though.

Good luck.

[Gamelobby]

Is all of this still necessary in 4.2 ?

[Toorak Times]

Is all of this still necessary in 4.2 ?


I have a mate that swore black and blue you had to hard code to get results, most can be done through the Stylevars for me, just recently'getting' it, when you do it is a piece of cake