427 Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required! March 07, 2011 /

The ability to display post summaries and automatic thumbnails is one of the most sought-after Blogger customizations. Using such a feature enables us to create a cohesive layout on non-item pages with the entire post and full-sized image on item pages.

Recent changes to Blogger's functionality now enables us to achieve this using only Blogger code - no need for JavaScript, awkward CSS customizations or restrictions on the length or format of our posts.

With only a few small changes to our Blogger template, we can display post summaries and thumbnails using this easy to manage hack.

How to add Blogger post summaries and thumbnails in three simple steps

Here's my step-by-step guide to the easiest solution for post summaries and thumbnails with Blogger:

Step 1 - Back up your template!

It is important to back up your Blogger template before making any edits. This ensures we can easily restore the working template if anything goes wrong.

To back up your Blogger template, go to Design>Edit HTML in your Blogger dashboard and click the Download Full Template link near the top of the page.

You'll be prompted to save an XML file to your computer hard drive - this XML file includes all of the HTML and widget templates required to display your current Blogger design. Be sure to save this in an easy to remember location and make a note of the file name in case you later need to restore your working template.

Step 2 - Add the code to display summaries and thumbnails on non-item pages

The next stage is to add the Blogger code which will display a summary and thumbnail of our posts. Go to Design>Edit HTML and check the Expand widget templates box and search for the following line of code:

<data:post.body />

Replace this line with the following code:

      <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

Preview the change to your template and you'll see that your posts will appear in a format similar to this:

As seen in the screenshot above, the thumbnail appears above the summary. We can align the thumbnail more cohesively to the left or right of the summary by adding CSS to our template.

At this stage, you can choose to save the edit to your template or add the CSS and preview the final effect before committing the changes to your site.

Step 3 - Add CSS to align the thumbnail image

While still on the Design>Edit HTML section of your dashboard, search for the following line:

</b:skin>

Immediately before this line, paste the following CSS statement:

.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

This will align the thumbnail to the left of the post summary, and allow some distance between the thumbnail and text like this:

If you would prefer to align your thumbnail image to the right, paste the following code instead:

.thumb img {
  float: right;
  margin: 0 0 10px 10px;
}

Preview your template to see how this makes your posts appear on the home page. When you're happy with the layout, save your template and enjoy your automated thumbnails!

How this customization displays summaries and thumbnails

While simple to add to our Blogger template in order for the function to work, there is a lot of complex conditional code in use to ensure the summaries display as they should.

First, the code checks if the page being viewed is an item page or not. If the page is not an item page, the summary/thumbnail code will come into effect.

The second check discovers if a post snippet is available (i.e: if the post contains some text). If there is a snippet, the code checks if a thumbnail is available and displays the thumbnail if there is, followed by the snippet. Where no thumbnail is available (when the post does not contain an image), only the snippet is displayed.

If there is no snippet available for a particular post, the complete body of text is displayed normally. This ensures that posts with no content or which feature only an image are displayed normally; no thumbnail is displayed, and any images are displayed at full size.

Finally, the code checks if the post contains the <!-- more --> tag. If it does not contain this tag, a "Read more" link will be displayed beneath the snippet, ensuring visitors can easily click through to read the post page. Where a jump-link is present, this is displayed as normal after the snippet.

Phew! It's complicated to explain, but hopefully produces a foolproof set-up in which posts will be properly formatted no matter what the conditions.

What do you think?

I hope this solution will prove useful for anyone who wants to display automatic summaries and thumbnails in their Blogger powered blog without having to rely on JavaScript, CSS or by changing the method used to write blog posts.

Please feel free to leave your opinions or suggest improvements to this hack by leaving your comments below.