Post Thumbnails and Snippets in Blogger

Blogger officially provides post thumbnails and snippets for posts. You do not have to use any fancy javascript to extract the first image of a post and the first few lines of a post to use as thumbnail and snippet respectively. You can use simple Blogger tags in the code of your template to use Blogger’s auto generated post thumbnail.

About Blogger Post Thumbnail

Blogger / Blogspot generates a 72p X 72px post thumbnail for all Blogger posts. You need to have at least one image uploaded to the post in order to use that image as a featured image. Only the first image is picked up as the featured image. If you have multiple images in a blog post, you cannot choose between them to use as a featured image. The first one is used by default.

The other limit on featured image is that you cannot choose the size of the featured image. A cropped 72px square image is used as the default featured image. Learn more about image sizes in Blogger.

In terms of Blogger tags, you can use featured images in your template XML using data:post.thumbnailUrl tag. Here is the code which shows how this tag can be used:

<b:if cond='data:post.thumbnailUrl'>
    <img expr:src='data:post.thumbnailUrl'/>
</b:if>

The code basically checks for the existence of a thumbnail. If the result is true, then it places the thumbnail image in the html document. The code above does not show the image beig surrounded by <div> tags to be styled according to the template.

To Use Custom Thumbnail Size

If you want to use larger thumbnails, you will have to use some javascript and jquery codes. Since, we can access uploaded blogger images of any size, we can replace the thumbnail URLs with bigger ones. This is done only after the original thumbnails are loaded. To do this, use a code like:

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(//s72-c/,"/s"+b);}}
resizeThumb("main",200);
//]]>
</script>

Replace 200 with any image width that you prefer. Replace “main” with name of the container div id where the images are placed. High quality thumbnails will be used this way. You can remove the jquery code inclusion if your template already has it.

About Blogger Post Snippets

Just like post thumbnails, Blogger / Blogspot also generates post snippets. Snippets are chunks of text from the first few lines of a blogger post. It can act as a summary or as the introductory lines of text to a post. A text snippet is 101 characters long and after that three dots (…) are added, marking the continuity of the post. If a jump break exists before those 101 first characters, then snippets are picked up to the jump break.

For snippets, the Blogger tag to use is data:post.snippet. It is usually place just after or besides the post thumbnail in index, label and search pages. Basically, it is placed in all those pages which are not posts. It is placed as:

<b:if cond='data:post.snippet'>
    <img expr:src='data:post.snippet'/>
</b:if>

The code checks for post snippets and places it in the html document. It is as simple as that. Also, in an html document, you would want the code to be surrounded by <div> tags and styled

Here is an example use of data:post.thumbnailUrl and data:post.snippet being used jointly. The Blogger if tags of this code allows it to be used in all the pages except the single blog post pages.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.snippet'>
        <b:if cond='data:post.thumbnailUrl'>
            <div class='thumbnail'>
                <img expr:src='data:post.thumbnailUrl'/>
            </div>
            <div class='snippet'>
                <data:post.snippet/>
            </div>
        </b:if>
    </b:if>
</b:if>

Using the codes and styling them in Blogger templates is up to your imagination.