Blogger Post Summaries & Thumbnails, Part II

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


didnt work for me either - no changes.

We were using a similar script until we got too frustrated with the lack of customization ability, and the fact that the thumbnail images were always messed up. So we coded a better script that provides more customization and fixes the thumbnail issues!

This is definitely the best code yet. I love how it looks overall, and by far, better than the rest. Just one question. I seem to find that there is no way to make the 1st post on the homepage NOT summarized. Is this true? If it can be tweaked so that the 1st post shows the full content, while the rest stay summarized, how do you do it???!!!

Kate @ Uniquely Undone

Kate, there is a way to do that. I can't paste the code as a comment because of HTML tags. Will email you.

Hi Laurence!!

Don't know if you are still reading these comments! I sent you an email...was wondering if there is a way to change how the summary thumbnail presents...currently it's cropped as you mentioned in Part 1, but can I make the thumbnail a better representation of the actual picture???

Here is what I mean...

They are "cut off".
Thanks so much!

Post a Comment