How To Support AMP-IMG with unknown Dimensions?
How to make Images in Your AMP Blog Articles Tidy, Without adjusting Height and Width on amp-img
How to make Images in Your AMP Blog Articles Tidy, Without adjusting Height and Width on <amp-img>
The worst human nature is lazy, agree? Yep !. Sometimes I was as one of the bloggers who are studying AMP, lazy because they have to arrange from the beginning.Especially if we use blogspot platform, we must replace all articles for valid AMP.
And the most time consuming thing is to convert the image code tadir <img> to <amp-img>. This is very time consuming.
Even more annoying, we must know exactly the size of the image we upload, because the <amp-img> must include width and height if using layout="responsive".
However, after I learned a lot on the project's official website, I found a more practical way to keep the images that we upload on the articles remain precise and responsive, according to the size of the images uploaded on the blogger article.
Then how? The main key turns out we have to create a new css in our template, and call it when we turn <img> into <amp-img>.
Copy CSS Fixed-Container
Please copy the CSS code below, and add it below the <style amp-custom = 'amp-custom'> code in your theme's edit panel.
.fixed-container,
.fixed-height-container img {
background-color: #ccc
}
.contain img {
object-fit: contain
}
.cover img {
object-fit: cover
}
.fixed-container {
position: relative;
width: 200px;
height: 200px
}
.fixed-height-container {
position: relative;
max-width: 713px;
height: 300px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: -10px;
margin-right: -10px
}
}
amp-img {
margin: auto;
max-width: 100%
}
amp-img.container {
text-align: center;
padding: 10px 20px
}
@media screen and (max-width:800px) {
.fixed-height-container {
margin-left: -20px;
margin-right: -20px
}
}
Calling CSS Code on AMP-IMG
Then, the next step is to change your article and change the standard amp-img code with special code that I will explain.When we want to edit <img> to <amp-img> code, use the code below.
<div class="fixed-height-container">
<amp-img class="contain" layout="fill" alt="Image description" src="URL-Image"></amp-img>
</div>So you just change the URL of the image only, without using width and height.
The result is like the example below.