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!

Monday, September 05, 2011

So I stumbled on some Blogger templates and decided to give my poor, tired blog a makeover.  I fell hard for the pretty ones with the flyout menus, post summaries, thumbnails and all.  Unfortunately, like so many of my flirtations with pretty things, it ended only in despair and disappointment.  My blog ended up looking nothing like what the previews promised, mainly because:

• - The thumbnail images were stretched to fit, instead of cropped.  They looked absolutely atrocious unless the first picture in all my posts happened to be square.
• - The preview text was one big blob of text since HTML elements like line breaks, coloring, and bullet points were being stripped.
• - I couldn't use an image other than the first in a post as the thumbnail preview

That can't fly!  I did some digging and cooked up a short script to generate summaries.  It should work with most Blogger templates, and for sure the out-of-box ones.  Here's how it looks applied to the default "Simple" template.  I can create posts with any formatting and images of any size.

The Home page shows the first few lines of each post, with a "Read More" link to the full post.  Note that formatting like linebreaks and bullets are preserved.  The 200 x 200 thumbnails are then cropped from the top left corner of the first image (unless otherwise specified) in the post.

Read Part II for how to implement this.