I've seen blogs which display post thumbnails with its post summary in their homepage, search results, label results -- well as long as it isn't a static page or the post page itself. You can do this in a number of ways. You can settle for thumbnail images at the beginning of your posts, or create two versions of your post image (a thumbnail size and its original size) or perhaps use a script to do the resizing.
For my blog, I wanted to only use one image (usually 500x500) and avoid using scripts or widgets. So the solution I went for was to use CSS to take care of the resizing. The drawback only is that when your page loads, it loads the actual size of your image and not its thumbnail size. I'm actually not that particular with this disadvantage since my purpose in using post thumbnails was more on the aesthetics and layout of my blog and not for lessening page load speed (I believe this does not work in older versions of IE, but the great thing is that it just slips to using the original image size - no mess!).
Anyway, for this tutorial, I'll be assuming you already have basic knowledge in CSS and HTML and know your way around Blogger -- so don't forget to backup your template or use a test blog. With that said, let's begin!
Here's a screenshot from my other blog of what the post thumbnails would look like:
Post thumbnails
Let's start with this post summary and its full size preview image as our sample.
Post summary with preview image in its original size.
Now if you haven't created any blog posts yet or have very few posts to edit, you can use this following block of CSS code in you template:
.post-list-item img.preview {
width: 200px;
margin: 0 .5em .2em .4em;
float: left;
}
.post-list-item- this is the container for the post that will make the post image resize to a thumbnail. We will add this directly in the template later. You can change the name if you want..preview- this is the class of the image to resize to a thumbnail. Remember that you should always use this in your blog posts' preview image. You can change the name if you want.width- this is the width of the post thumbnail. Change this value as needed.margin- this is the margin of the post thumbnail. Change the values as needed.float- this will float the post thumbnail to the left making the post summary/text wrap around it.
And so your HTML for the blog post will be something like this:
<div class="post-list-item"> <!-- This DIV goes directly in the template -->
<p>
<img class="preview" src="IMAGE_URL" alt="">
</p>
<p>
Your post summary goes here...
</p>
</div>
But if you already have tons of posts and adding the .preview class to all your preview images will be too much to do, you can try using CSS selectors such as :first-child for example. In my case, my preview images are always the first element in my blog post which is wrapped in a p tag:
<p>
<img src="IMAGE_URL" .../>
</p>
Given that structure, I can just replace .preview with p:first-child.
.post-body img {
display: block;
max-width: 100%;
height: auto;
}
.post-list-item p:first-child {
width: 200px;
margin: 0 .5em .2em .4em;
float: left;
}
.post-body- this is the class of the post body in the Blogger template. Do not change this unless you have a custom template.max-width,height- added to allow the image to be responsive. It will resize itself to the width we specified for the post-list-item.p:first-child- you might have to change this depending on the structure of your blog posts.
After applying the code, we now get this:
Preview images resized to a thumbnail.
When using this alternate method, make sure to always have a preview image otherwise your layout might turn into a mess.
A missing preview image messed up the layout.
We are almost done. We just have to add a condition on when to use this layout because as of now, the preview images (or :first-child element) will always be set to a thumbnail size on all pages.
If you are not familiar with using conditional statements in Blogger, you can read my separate post on this topic.
So for the condition - we need to check whether the page is an Item page (post page) or a Static page. If it is, we do not use the post-list-item class because as mentioned earlier, this class will cause the post images to be resized as thumbnails.
In your template, look for the following line of code: <data:post.body/>. Note that you should be in the <b:includable id='post' var='post'> tag and not in the mobile version includable tag, <b:includable id='mobile-post' var='post'>.
Now change <data:post.body/> to the following:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class="post-list-item">
<data:post.body/>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
What happens here is that we check that the page is not an Item page AND not a Static page. If both conditions are met, we wrap <data:post.body/> in a post-list-item div to enable post thumbnails; otherwise, we just display it as is.
So there you have it. I hope I didn't confuse you. If I did miss or mess something up, just feel free to leave a comment or question.