You are only in a hurry till you get to the front of the queue

Friday, 2 January 2015

Post.snippet and post.thumbnail: tools for summarizing your blog | Blogger-Hints-and-Tips

Post.snippet and post.thumbnail: tools for summarizing your blog | Blogger-Hints-and-Tips:

'via Blog this'

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 shows documents what I've found out about them.

"Fields" in Blogger

XML verstehen.TitelseiteMany 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 templates use XML tags to access the data  that make up blog posts.

This means that Blogger templates can be made up of statements like this:
<b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond=''>
       <a expr:href=''><data:post.title/></a>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>

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 template to explicity show these things, and then making posts with particular possible values.    And this is what I've found.


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


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.

What your readers see:

Unless you edit your blog template 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 template to only show the snippet or thumbnail on certain types of pages.

And if you allow your visitors to see your blog using Dynamic templates, 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 edit your blog's template, 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-templates but not in the official list?

Related Articles:

Installing code into your blog

Centering gadgets in your blog.

What are dynamic templates

Advantages and disadvantages of editing your blog's template

Putting text and pictures side-by-side


Post a Comment

Thank you for taking the time to comment. Your opinion is important and of value and we appreciate the positive feedback! If you are "Negative Nancy" then please do us, and humanity, a favor and piss off.

Total Pageviews

Google+ Followers

Interesting pages

Blog Archive

Popular Posts

Recent Comments

Rays Twitter feed


Web sites come and go and information is lost and therefore some pages are archived. @rayd123 . Powered by Blogger.