How to Show Thumbnails In AMP HTML Blogger Templates

Tutorial How To Show Thumbnails In AMP HTML Blogger Templates

I use the blogger AMP template and changed all the articles including the <img> so <amp-img> code, but how come the thumbnail does not appear? I wonder why?

It turns out that blogger templates will not read thumbnails if all images in an article are changed to <amp-img>.

As we know, that img tag in AMP HTML is changed to amp-img. If we write in a post like this:

<img alt='image text' src='url-image'/>

it will result in AMP HTML validation error. The correct writing is like this: :

<amp-img src="url-image.png"
    width="1080"
    height="610"
    layout="responsive"
    alt="AMP HTML"></amp-img>

Image will appear well on post. However it will not appear on the thumbnail on the main page / homepage. To outsmart, to have the image appear on Homepage add a noscript tag so the code becomes like this:

<noscript><img alt='gambar' src='url-image'/></noscript>

That's How to Generate Thumbnails on AMP HTML Blogger Templates. May be the solution of your "confusion": D