Great News! Try our new tool to convert img to amp-img. Try Now!

Friday, October 20, 2017

How to Show Thumbnails In AMP HTML Blogger Templates

Tutorial How To Show Thumbnails In AMP HTML Blogger Templates. That's How to Generate Thumbnails on AMP HTML

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