Open In App

How to change/update image size dynamically using amp-bind in Google AMP ?

Improve
Improve
Like Article
Like
Save
Share
Report

 

Sometimes you want to add custom interactivity to your AMP pages to make your pages look more user-friendly and user calling. Although AMP’s pre-built components are limited, so amp-bind is made to overcome this problem. It helps the developer to add custom interactivity to the pages without using AMP’s pre-built components. You can use amp-bind to change the text dynamically on user interaction with the page.

Setup: To use amp-bind in your page you have to import its script in the header of the document.

HTML




<script async custom-element="amp-bind" src=
</script>


The amp-bind of Google AMP comprises three main concepts:

  1. State: State variables are responsible for the update on the page on the basis of user actions. It is very important to define a state variable.
  2. Expression: They are like JavaScript expressions used to refer to the state.
  3. Binding: They are a special attribute that is used to link an element’s property to a state via an expression.

To dynamically change the size of the image we will make use of AMP.setState() attribute. This attribute helps to change the attributes of other fields dynamically.

Example:

HTML




<!doctype html>
<html amp>
  
<head>
    <meta charset="utf-8">
    <title>Google AMP amp-bind</title>
  
    <link rel="canonical" href=
  
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
  
    <script async src=
    </script>
  
    <!-- Import amp-bind component in header -->
    <script async custom-element="amp-bind" 
    </script>
  
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
              
            -moz-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
              
            -ms-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
              
            animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both
        }
  
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
    </style>
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
    <style amp-custom>
        h1 {
            color: forestgreen;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>
            Geeks For Geeks
        </h1>
  
        <div style="padding: 1em;">
  
            <amp-img src=
                width="100"
                [width]="update.width" height="100" 
                [height]="update.height">
            </amp-img>
            <br>
            <button on="tap:AMP.setState({
                        update: {
                          width: 200,
                          height: 200
                        }
                      })">
                Change size
            </button>
        </div>
    </center>
</body>
  
</html>


Output:



Last Updated : 25 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads