6

I recently started with blogger. I was tweaking the homepage a bit to display thumbnail and post excerpts with read more link.

A lot of websites say to use this kind of code:

  <b:if cond='data:blog.pageType != &quot;index&quot;'>
      <b:if cond='data:post.snippet'>
      <b:if cond='data:post.thumbnailUrl'>
          <div class='Image thumb'>
            <img expr:src='data:post.thumbnailUrl'/>
          </div>
      </b:if>
        <data:post.snippet/>
      <b:else/>
        <data:post.body/>
      </b:if>
  <b:else/>
  <data:post.body/>
  </b:if>

But can we tell blogger what's in data:post.thumbnailUrl? For some people, blogger will just pick an image magically from their post.

How can I decide which thumbnail will be used?

| improve this question | |
  • A neat solution is to put an image on the top of the post and use a CSS style to hide it to the readers. <img style="display: none;"... now the first image should appear as the thumbnail but it won't get shown when a reader reads the post. Job done. – Deepak Kamat Jun 18 '17 at 17:23
4

You can't control this, Blogger decides for itself which image to use.

I did some reasearch a while back (documented here), and concluded that it's most probably the first picture in the post which is both

  1. over a certain size, and
  2. hosted in your own Google Photos albums.

From memory, I think that testing showed that the size was 17k. But I'm not 100% sure if that rule is universal - it may depend on the picture dimensions, too, since I cannot see that a very tall or wide thumbnail would be overly useful.

| improve this answer | |
  • You are right, I did more digging after that and I could not understand why my first and unique image in my post was not taken as thumbnail. It turns out that it was because I inserted this image with a link to my Amazon S3. I don't understand why there is no official doc about this. Thanks for your answer. – Kev Mar 8 '13 at 11:52
8

In fact, you can, but in a little hack way.

As blogger considers the first image in a post as a thumbnail, and you want to add some other image as a thumbnail which should be not included in a post or something like that....follow these steps.

  1. Add the thumbnail image at the top of the post.
  2. Go in 'HTML'(you're in customise tab right now) and locate the image tag.
  3. Add style attribute to it and add display property to none: <img style="display:none;">
  4. Come back to customise tab and publish the post.
  5. You'll notice that on the home screen, you can see the thumbnail but after opening the post you'll not see it.
  6. That's it!

If anyone didn't understood this, then I've wrote a blog post based on this.

| improve this answer | |
  • that should be the accepted answer. The hack works very well! – Jeremie Nov 20 '17 at 16:12
  • @SreYash Thank you for your answer, I've added "display:none" part and it is shown as thumbnail and is not visible in blogpost page BUT it's visible in my homepage of blog when listing articles. How to avoid displaying thumbnail photo in my main page too? It's a blogspot page. – Ismail Yavuz Jun 27 '19 at 9:55
  • 1
    Did you check the source code on the homepage ? is the style attribute still on that image ? is there a css rule overriding that change? but I would maybe try some dirty workaround like: - add a custom class to that image. - add some custom css in the homepage to display:none that class – Jeremie Jun 27 '19 at 11:01
  • As far as I understand the style that we add to <img in the post itself not present in the main page. So the thing we could was only remove ALL thumbnails from main page. – Ismail Yavuz Jul 1 '19 at 13:38
3

Blogger doesn't pick images by magic. Blogger will automatically choose the first image as a thumbnail. So if you need to keep your own image as thumbnail, please make sure that the desired image is kept first while you write the post.

| improve this answer | |
  • Yes but the problem, as I mentioned in a previous comment, is that it did not work because the image was not hosted in Picasa / Google img related services. Something that is (was?) totally not indicated anywhere. – Kev Oct 1 '13 at 14:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.