blog

May 11, 2018

What is worth knowing about posts' thumbnails?

This may come in handy:

    You probably know that Blogger can display a list of posts (e.g. archive posts, posts by label, search results...) containing their title, thumbnail and excerpt. What You may not know is that there are two kinds of thumbnails. One of them acts pretty normally, while the other is a little bit surprising.

    What is the difference between post's thumbnail and "firstImage"?
    Blogger uses different ways of generating posts' thumbnails. There is a way in which Blogger confines itself just to detect the first image of Your article and uses it as a thumbnail.

    In Blogger template's syntax thumbnails generated in this way are represented by following code:

    <img expr:src='data:post.firstImageUrl' />

    The image can be resized (proportionally) - You can precisely define this via CSS, adding some class in the template first:

    <img expr:src='data:post.firstImageUrl' class='className' />

     

    There is also another way of generating thumbnails: the tricky one ;) - consists not only resizing, but cropping. But in case of resizing it could be confusing because this time the real size of the thumbnail (its width and height) is defined by Blogger, not You. So if You'd like to enlarge thumbnails' size a little bit via CSS - You will encounter considerable loss of quality: images won't look good that way. Besides Blogger crops the images - which take place completely without Your control. There are cases when it is not a good idea to allow it to happen (e.g. when You'd like Your images to be displayed without cutting some parts off).

    In Blogger template's syntax thumbnails generated in this tricky way is represented by following code:

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

     

    I think there isn't a definite answer which way is better. On one hand the firstImage method gives You full control: You can do it almost anything You want, modeling the look of posts' pictures to Your heart's content (including cropping - which could be possible via some creative CSS commands). On the other hand sometimes You could find it appealing to have Your images cropped out-of-the-box, in a kind of random way - which could be pretty nice effect, adding some life to Your site.

    Unfortunately those two ways of generating thumbnails are not always interchangeable: it isn't always possible to have the choice between the two (like, for example, within Popular Posts gadget which doesn't support firstImage variant). But You can still use both methods on Your posts' listing (newest posts, archive posts, posts by label, search results).

    No comments:

    Post a Comment