Post Thumbnails for Blogger

I had got quite some number of questions regarding how I display post thumbnails here on my blog. So I decided to write a tutorial about the different methods that you can use to display post thumbnails. Post Thumbnails will look good on your blog if you are using the Blogger Jump Break Feature to efficiently control the post excerpt that gets displayed on non-post pages.  So here are the methods:

1. Using the data:post.thumbnailUrl Template Tag

This tag will give you a 72x72px thumbnail of your post image.So you can use this tag in your template to render a small thumbnail image.This is the same image which will be displayed on the Mobile version of your Blog.This tag also renders YouTube Thumbnails(small version) and Flickr Thumbnails. To render the thumbnail, you can use the following code snippet

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:post.thumbnailUrl'>
<img class="postthumb" expr:src ="data:post.thumbnailUrl" expr:alt="data:post.title"/>
</b:if>
</b:if>

This code should be added just before <data:post.body/> in your template(Expand your Widget templates, and use the keyboard shortcut Ctrl +F to find)

Remove the Green lines if you want the thumbnails on Post Pages as well

Now to spice up the Thumbnail image, you can add the Following CSS.

CSS can be added at Template Designer > Advanced  > Add CSS

.postthumb {
padding: 5px;
float:left;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

2. A bigger thumbnail image using data:post.thumbnailUrl tag

As I had mentioned above, you get a 72px image using this Blogger Template tag.If you need something bigger than 72px, then you will have to add a small flavor of JavaScript to your Template. This is the code that I’m talking about, and it should be added above <data:post.body/> in your template.(Expand your Widget templates, and use the keyboard shortcut Ctrl +F to find)

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:post.isFirstPost'> 
<script type="text/javascript">
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=150;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQH0uxzKByizU0T3Nz150ubS9kUzqO0JD9JaSVAriP3oKO-M2-Uua4aGs0tRMJ_UemwMwGPHkMzYtmD0gih4ORG0eGlL1ErQfIhnOy57zc15_EMY0n-yBZDR8TyxRSSixVlTL_pxtHBVo/s72-c/default.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</b:if>
<script type="text/javascript">
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</b:if>

The script above will display a image of size 150 pixels(you can alter that by modifying the code). It also uses a default thumbnail if the post has no image in it(you can turn it off by setting show_default_thumbnail to false. You can also alter the default thumbnail if you want). If you want the thumbnail to appear on the post page as well, then remove the 2 green lines in the code.

You can use the same CSS(as in method 1) to decorate the thumbnail.

Note: This method won’t give you bigger YouTube thumbnails. The next available size of the YouTube Thumbnail is 480x360px, and I don’t want to load such a huge image as a thumbnail. so the script doesn’t handle that.Similarly this Script doesn’t handle Flickr Thumbnails. So you will be getting the default versions of these thumbnails.

The next 2 methods are for advanced users

3. I know what to do.

Just add an image to the beginning of the post, and add the class name postthumb to it.

So your post should be in the following format:

<img src="the post thumbnail url" class="postthumb" align="left" title="Post name"/> The Post excerpt <!—more –> The Rest of the post

You can use the same CSS mentioned in the first method.It will be a better idea to specify the width and height parameters in the CSS.This image will appear in your Feed as well.

Now if you want to hide this thumbnail on the post pages, then add the following snippet above </head> in your template

<b:if cond='data:blog.pageType != "index"'> 
<style type="text/css">
.postthumb{display:none;}
</style>
</b:if>

This is the method that I use here on my blog

4. Using Enclosure Links and making them work similar to Word Press Custom Fields

You can hack up the blogger enclosure links and make them work like Word Press Custom Fields

The code to render the Enclosure image(post thumbnail):

<b:if cond='data:blog.pageType == "index"'>
<b:loop index='i' values='data:post.enclosures' var='enclosure'>
<b:if cond='data:i == "0"'>
<b:if cond='data:enclosure.mimeType == "image/jpeg"'>
<img expr:src="data:enclosure.url" class="postthumb" expr:alt="data:post.title"/>
<b:else/>
<b:if cond='data:enclosure.mimeType == "image/png"'>
<img expr:src="data:enclosure.url" class="postthumb" expr:alt="data:post.title"/>
<b:else/>
<b:if cond='data:enclosure.mimeType == "image/gif"'>
<img expr:src="data:enclosure.url" class="postthumb" expr:alt="data:post.title"/>
<b:else/>
<b:if cond='data:enclosure.mimeType == "image/bmp"'>
<img expr:src="data:enclosure.url" class="postthumb" expr:alt="data:post.title"/>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:loop>
</b:if>

This code can be added above <data:post.body/> and you can use the same CSS as in the other methods . Remove the Green lines if you want the thumbnails on Post Pages as well. .It would be a good idea to specify the width and height in the CSS.When you add an Enclosure link, Blogger post editor will automatically set the mime Type. This mime type is used in the above code. So don’t give any wrong values for mime Type. Always provide the valid mime type. The code uses the First enclosure link only. So your post thumbnail should be added as the first enclosure link.

The Enclosures added to the post will appear in the Blog Feed.

5. The Old way of doing it.

Using the automatic post summary JavaScript is an old outdated method. If you are using it, make sure that you use jump breaks as well