I decided to standardize thumbnails on our news and events site to 200x200, but only display them as 50x50 when showing a list of news items.
For a little extra visual fun, I've added some jQuery to create a zoom animation when you hover on the thumbnails. If you are interested in a news item, but can't see details of the photo well enough in the 50x50 resolution, now you can roll over the thumbnail and it animates larger until you roll away from it.
Since my .NET master page already had a reference to the jQuery framework and the thumbnail image had a CssClass of "sf_newsThumbnail", it was as simple as adding a little script on the Sitefinity template (Sitefinity/ControlTemplates/News/ListPageMaster.ascx) which deals with creating lists of news items.
<script type="text/javascript">
$(document).ready(function () {
//Larger thumbnail preview
$(".sf_newsThumbnail").hover(function () {
$(this).addClass("hover").stop()
.animate({
width: '200px',
height: '200px'
}, 200);
}, function () {
$(this).removeClass("hover").stop()
.animate({
width: '50px',
height: '50px'
}, 400);
});
});
</script>
Also since my content had a gray border around it, I needed to add a div between the list of news items and and the list that is used as a pager.
<div class="clear"> </div>
That uses my clear class.
Special thanks to Soh Tanaka and his Fancy Thumbnail Hover Effect w/ jQuery example which simplified for my purposes.