Handling Images & Thumbnails

Learn how to work with post images and create different thumbnail sizes.

Visuals are key to an engaging blog. Blogger provides powerful tools to manage images and thumbnails, but you need to know which data tags to use.

The Post Thumbnail

The primary data tag is `data:post.thumbnailUrl`. This gives you the URL of the first image in the post, which Blogger designates as the thumbnail. It's important to check if it exists with `<b:if cond='data:post.thumbnailUrl'>` before trying to display it.

Resizing Thumbnails

You can resize thumbnails on the fly using the `resizeImage` operator. This is incredibly useful for creating different image sizes for different contexts (e.g., a small square for a sidebar, a a large rectangle for the main post).

Code Examples

xmlDisplaying a Resized Thumbnail
1
2
3
4
5
6
7
8
9
10
11
12
<!-- Check if a thumbnail exists -->
<b:if cond='data:post.thumbnailUrl'>
  <div class='post-thumb'>
    <a expr:href='data:post.url'>
      <!-- 
        Create a 300px wide, 200px tall, cropped thumbnail.
        Syntax: resizeImage(imageUrl, newSize, optionalRatio, optionalCrop)
      -->
      <img expr:src='resizeImage(data:post.thumbnailUrl, 300, "1:1")'/>
    </a>
  </div>
</b:if>

Pro Tip

For better performance, use the `resizeImage` operator to serve smaller images where appropriate, instead of loading a huge image and scaling it down with CSS.

Was this lesson helpful?

Have feedback, found an issue, or have a suggestion? Let us know!

Send Feedback