Selecting a thumbnail image for your post’s feed


If you look at the home page for our blogs, you will see little, square thumbnail images next to every post teaser. This is how to add/manage those little images.

Example of a blog feed with square image to the left of each post teaser.

Examples of the thumbnails

What happens by default?

If you do nothing to your blog post the thumbnail will use the first image included in your post, if any exists. If there are no images in your post then it uses a default image for the UI Libraries (or, perhaps, your particular blog).

Square thumbnail and a non-square image

Automation is a wonderful thing if it does what we want. The square thumbnails use the largest possible version of an image that fits by cropping a square out of the center of the image. See the examples below.

Landscape (primarily horizontal) images are cropped to cut away the right and left edges.

Landscape image cropping

Portrait (primarily vertical) images are cropped to cut away the top and bottom edges.

Portrait image cropping

For the above examples the cropping to a square image works out because all the salient image information is still inside the square. Other images will be less than optimal.

Example of a bumper sticker failing to crop well.

A cropping failure

So it behooves you to use an image with better aspect ratio. This is not always simple so…

Taking more control using a “Featured Image”

When you are in the edit page for your post, look in the right sidebar (probably near the bottom) and you will see a “Featured Image” box. Clicking on the “Set featured image” link will display the Media library to chose an existing image or upload an image. If set, a featured image become the image that is used for the blogs feed. It does not show up in the content of your post.

Things to remember about the featured image:

  • It should be square or look good cropped as shown above.
  • It should be at least 200px by 200px so that the resolution does not suffer in some applications of the image.