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