Tip: A better automatic thumbnail and summary script for Blogger

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.

This was the script that we found.

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;
}
} else wrapper.append(textContents);
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.

To limit this functionality to only certain pages or types of pages, you'll want to learn about the different page types, and choose the one you want to use. For example, if you only want it to show on "index" page types you'll want to put the above script into an "if" statement such as:

<b:if cond='data:blog.pageType == "index"'>


</b:if>

Note: for videos, this will only properly resize the video if it is a YouTube video (which provides a thumbnail via Picasa's structure).

Update: 
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.

Update: 08.30.2012
The code has been updated to allow for cases of no images in a post and still function properly.

Update: 10.08.2012
The code has been updated to fix the bug where no summary was showing if no image in the post.

Update: 11.01.2012
We've created additional variations on this script!

• A grid of post thumbnails
• A first-post newspaper-style variation