Monday, September 05, 2011

This is Part II on how to make Blogger display post summaries with thumbnail previews.  Part I goes over exactly what we're trying to accomplish and how the results will look.

The process described here should work on all the out-of-box Blogger templates.  Complications may arise if you're using a heavily customized template... Be sure to save a copy of your template before making any changes!


Edit Template

First, we have to open the blog template for editing.  On your blog's Administration page, go to Template, then click on Edit HTML:

Check Expand Widget Templates.  Before continuing, save a copy of the full template just in case.

Insert Summary Generation Script

Next, we insert a piece of javascript to generate the summaries.  Search for the following tag in the template: <b:includable id="main" var="top">

Copy and paste the code in this file into the space circled in red above:

Update Post Body Template

Finally, we update the template that renders a post to invoke the summary creation script if the current page is the Home page.  If we're on an individual post page or a static page, then display the full post body as normal.

To do so, search for the following tag in the template: <b:includable id="post" var="post">.  Then, search for <data:post.body/> beneath that.  Note that there may be more than one <data:post.body/> in the template, and we specifically want the one under that first tag:

Replace the tag with the contents of this file:

That's it!  Save the template and you should start seeing post summaries on your blog. For reference, here's the entire default Simple template with the added code.


Working with Thumbnails

By default, the first image in post will be used as the thumbnail.  You can override this behavior on specific posts by setting the class attribute on its images (from the post editor's HTML view).  Note that the attributes are case-sensitive.

• - To use an image other than the first as the thumbnail, set that image's class to preview
• - To specifically prevent an image from being used as the thumbnail, set its class to noPreview
• - To use a completely different thumbnail, add the thumbnail image to the post, and set its class to hiddenPreview.  This image will not be visible on the full post, but will be used as the thumbnail for the summary.  I'd recommend putting this at the very end of the post.

For instance, the update below would cause the second image to be used as the thumbnail:

The end!