Thursday, October 26, 2017

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>

    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".

    The problem is if we do not know the dimensions of the image. So if origin inserts width and height, the image will not be neat according to the dimensions.

    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.

    That's how to image in your blogger amp ampih article, without having to set the width and height. May be useful :)