Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 25 Oct, 2020

 

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :