About this demo site

When we first started creating custom websites using Blogger, one of the first real script needs that we ran up against was the need for an automatic thumbnail and read more function, one where you could set the size of the thumbnails and the word count of the summary. This was before Blogger added jump breaks, but also allowed you to slip a thumbnail in there even if the image was later in the post.


It did the job, was sort of customizable, but it had a bunch of things in it that just didn't work out well, namely:
  • all of the thumbnails had to be the same size, even if they had different orientations
  • for long pages it seemed to crash, leaving the page half-rendered
  • lots of people had trouble installing it because it required that you delve into widget code


So we have created our own.

Our script uses JQuery and contains a number of customization options:
  • you can set the max-width that you want the thumbnail to be
  • set whether you want the image squared or proportional when resized (squared requires Picasa)
  • determine orientation for a left or right float
  • set the word count of the summary
  • can even set the word count to 0 to just have the first image as the contents

You can download a clean version of the code here.

The code:


<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/

$(document).ready(function() {
// change the dimension variable below to be the max pixel width you want the thumbnails to be
var dimension = 90;

// set this to be the word count of the lead-in
var words = 80;

// set this to be left, right, none or inherit
var orientation = "left"; 

// set 1 for squared image or 0 for proportional,
// squared images only works for images hosted in Picasa
var square = 1;

// continuation of the introduction paragraph
var addon = "...";

// optional read more link, leave empty if you don't want it
var readmore = "read more";

// image margins such as 1em or 5px
var margin = "1em";

$('.post-body').each(function(n, wrapper){
var newContents = "";
var wrapper = $(wrapper);
var image = $(wrapper).find('img').first();

var textContents = wrapper.text().split(' ').slice(0,words).join(' ');
if (words > 0) textContents += addon;
wrapper.empty();

if (image.attr('src')) {
var imageOriginalHeight = image.height();
var imageOriginalWidth = image.width();
var imageParent = $(image).parent();
wrapper.append(imageParent).append(textContents);
if (square) {
image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + dimension + '-c')});
image.attr('width',dimension).attr('height',dimension);
} else {
image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + dimension)});
image.attr('width',dimension);
var newHeight = (imageOriginalHeight/imageOriginalWidth * dimension).toFixed(0);
image.attr('height',newHeight);
}
imageParent.css('clear','none').css('float',orientation);

switch (orientation) {
case "left":
imageParent.css('margin-left',0).css('margin-right',margin);
break;
case "right":
imageParent.css('margin-left',margin).css('margin-right',0);
break;
default:
imageParent.css('margin-left',margin).css('margin-right',margin);
break;
}
}
if (readmore) {
var link = wrapper.parent().find('h3 a').attr('href');
wrapper.append('<br /><a href="' + link + '">' + readmore + '</a>');
}

wrapper.append('<hr>');
$('hr').css('width','100%').css('background-color','transparent').css('border-width',0);
});

});
//]]></script>


Place the above script into your template before the </head> tag.  If you run into any trouble, or have any suggestions for making it even better, please leave messages in the comment form below! You can see a demo here.


Addition #1:
We've generated a version that will now change the link of your thumbnail into a link to the post itself; this is good if you don't want summary text, but want a thumbnail link to the posts. Here is the clean version that includes the Lightbox kill script. Use this in conjunction with CSS to create a grid of image links.