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

Last Updated : 29 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="https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>

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

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.
Expression: They are like JavaScript expressions used to refer to the state.
Binding: They are a special attribute that is used to link an element’s property to a state via an expression.

Example:

HTML

<!doctype html>
<html amp>
 
<head>
    <meta charset="utf-8">
    <title>Google AMP amp-bind</title>
 
    <link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-bind/index.html">
 
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
 
    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>
 
    <script async custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js">
    </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;
            text-align: center;
        }
 
        .gfgNew {
            border: 5px solid crimson;
        }
 
        .gfgOld {
            border: 5px solid orange;
        }
    </style>
</head>
 
<body>
    <h1>
        Geeks For Geeks
    </h1>
 
    <amp-state id="gfg">
        <script type="application/json">
          {
            "new": {
              "imageUrl": 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png",
              "style": "gfgNew"
            },
            "old": {
              "imageUrl": 
"https://media.geeksforgeeks.org/wp-content/uploads/20201026154131/logogfg.png",
              "style": "gfgOld"
            }
        }
      </script>
    </amp-state>
 
    <div style="padding: 1em;">
         
<p>
            Each logo has different border color...
        </p>
 
        <h4 ="'This is ' + logo + ' logo...'">
            This is old logo...
        </h4>
        <center>
            <amp-img width="200" height="200" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201026154131/logogfg.png"
                [src]="gfg[logo].imageUrl" 
                class="gfgOld"
                [class]="gfg[logo].style">
            </amp-img>
            <br>
            <button on="tap:AMP.setState({logo: 'new'})">
                New Logo
            </button>
            <button on="tap:AMP.setState({logo: 'old'})">
                Old Logo
            </button>
        </center>
    </div>
</body>
 
</html>

Output:

When New Logo button was hit, image and border color both got dynamically changed. When we hit Old Logo button image and border color changed to the previous combination.

Suggest improvement

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

Share your thoughts in the comments