how to make a valid amp blog post image

Hurufsamar

Tuesday, September 26, 2017

for blog writers, maybe it's no stranger to hear the word amp.
you could say amp makes loading the blog faster so that blog visitors don't have to wait long.

however, making valid amp posts is not easy.
after writing the article, before publishing, the article must go through the edit stage.
the image in the article must be edited to be valid amp.
if the article is invalid amp, then your blog doesn't become valid.

to make valid post pictures amp very easy.
we upload the image as usual then change the compose mode to html.
html code will appear the image, more or less like:

<div class = "separator" style = "clear: both; text-align: center;">
<a href="url-image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border = "0" data-original-height = "67" data-original-width = "234" src = "url-image.png" />
</a>
</ div>

change the script above to be the script below

<div class = "img-width-300 img-center">
<amp-img src = "url-image.png"
width = "300"
height = "169"
layout = "responsive"
alt = "an image"> </ amp-img>
</ div>

adjust the width and height of the image to fit your blog template.

to make one image thumbnail and not appear in the article, use the code