Post.snippet and post.thumbnail: tools for summarizing your blog

The snippet and thumbnail attributes now appear to be available for all Blogger posts, even though they're not documented in Blogger's official list.  This article documents what I've found out about them. 

"Fields" in Blogger

Many people are used to computer systems that are based on databases which have rows (records) and columns (fields).

Blogger use a database, which has tables and fields.

But instead of record.field notation, Blogger themes (previously called templates) use XML tags to access the data  that make up blog posts.    (Same concept, just a different way of referring to the values.

This means that Blogger themes can be made up of statements like this:

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>

This basically says "If the post has a title, and if it has a link, then show the title value linked to the URL.   If it just has a title but no link, then just show the title.   Otherwise don't show anything in this spot.   And if something is shown, format it with the header-3 style."

A list of the tags (much like fields or attributes in other programming languages) that Google has told us about is available in this help article (I have a link to it in the "handy tools" section of the sidebar).

But recently people have noticed two new tags that are not included in this list, and have started writing Blogger tweaks, hacks etc to make use of them.   They are are

• data:post.snippet
• data:post.thumbnail

I haven't been able to find any official documentation about what these tags refer to.

But I have done some investigations in a test blog    (by altering the theme to explicitly show these things, and then making posts with particular possible values.    And this is what I've found.

Post.Snippet

If a post has a jump-break before character 140, then the snippet is all the text before the jump-break.

But if the post does not have a jump-break, or it is after character 140, then the snippet is the first 140 or so characters.   (Line breaks are shown when the snippet is displayed, in Blogger, but they are not included in the character count).

Currently, the only way to control what is in the snippet is to put the contents at the start of the post.  There is no other way to edit it.    (You may notice that all the posts in Blogger-Hints-and-Tips start with a paragraph or two in bold.   This is how I flag the "snippet" code to myself.)

Post.thumbnail

I haven't been able to work out the rules for this item by testing options.   So far I know that:

• Not every post has one, sometimes it's blank even if there's an image in the post
• It's not automatically the first image in the post
• It's not automatically the last image in the post.
• It's not the automatically the biggest image in the post.

I now strongly suspect that it's the first image in a post that is both hosted in Picasa-web-albums and  over a certain size (possibly about 18kb).

And an English coffee-drinker has worked out that it

creat[es] a 72 pixel square thumbnail [by scaling] the image so that the short edge is 72 pixels long and then crops the other dimension to retain the middle of the image

He also suggests controlling the thumbnail selection by putting the image that you want at the very start of the post and putting  style="display:none;"   into the <img    >   statement.    I don't like this idea, though, in case Google sees it as "hiding" content from their spider.

NB   some people may refer to the post-thumbnail item as the "cover picture" for a blog-post.   This is a valid idea, although the picture cannot be manipulated in the same was that other systems allow cover-picture editing.

What your readers see

Unless you edit your blog theme to use these values in a visible way, then your readers will not see anything different about your thumbnail and snippet - they just look like regular parts of the post.

But there are some specific ways that you might to use them, including:

• Setting the post-description meta-tag to the value of post.snippet
• Editing the theme to only show the snippet or thumbnail on certain types of pages.

And if you allow your visitors to see your blog using Dynamic themes, then I'm 99.9% sure that the post.snippet is the picture used to represent your blog in some of the more graphical formats.

Using the post.thumbnail and post.snippet tags

If you are happy to accept the disadvantages of editing your blog's theme, then you can show the snippet and thumbnail anywhere inside the blog post area.

The code to use to display them is:

<data:post.snippet/> - for the snippet, and

<img expr:src='data:post.thumbnailUrl'/>  - for the thumbnail

You need to put the thumbnail into an image tag because, of course, it is an image.

Do you have any more information?

In this article, I've shared what I have found out about these two fields by doing some testing.   But it's likely that I've missed some things out.

Have you been able to find, or work out, any more detailed rules about what post.thumbnail shows?

What else have you found out about these tags - or any other tags that are available in our blog-themes but not in the official list?

---

Related Articles

Installing code into your blog

Centering gadgets in your blog.

What are dynamic themes

Advantages and disadvantages of editing your blog's theme

Putting text and pictures side-by-side