April 27, 2020

Tutorial on How to Bring up Thumbnails on AMP HTML Blogger Template

How To Bring Up Thumbnails On AMP HTML Blogger Template

rial on How to Bring up Thumbnails on AMP HTML Blogger Template
I used the AMP blogger template and changed all the articles including the <img> code to <amp-img>, but how come the thumbnails don't appear? I wonder why?

It turns out that the blogger template will not read thumbnails if all the images in an article are converted into <amp-img> code.

thumbnail does not appear


As we know, that the IMG tag in AMP HTML changes to amp-img. If we write in posts like this:
<img alt = 'image' src = 'url-image' />
it will result in an AMP HTML validation error. The correct writing like here is:
<amp-img src = "url-image-here.png"
    width = "1080"
    height = "610"
    layout = "responsive"
    alt = "AMP HTML"> </amp-img>
Image will appear well on the post. However, it will not appear on the thumbnail on the main page / homepage. To outsmart it, so that the image appears on the Homepage add a noscript tag so the code becomes like this:

<Noscript> <Img Alt = 'Image' Src = 'Url-Image-You' /> </Noscript>

Good luck ...

Thus the Tutorial Article How to Bring up Thumbnails on AMP HTML Blogger Template. Hopefully the solution of your "confusion": D