examples/amp-render-with-images.html - main - githubmirror/amphtml

examples/amp-render-with-images.html

57 строк2 KB

dmanek

📖 [amp-render] couple of examples to demo component (#34851)

22 июн 2021, 18:55

22 июн 2021, 18:55002c072

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>My AMP Page</title>
    <link rel="canonical" href="self.html" />
    <meta name="viewport" content="width=device-width" />
    <!-- prettier-ignore -->
    <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
    >
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script
      async
      custom-template="amp-mustache"
      src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
    ></script>
    <script
      async
      custom-element="amp-render"
      src="https://cdn.ampproject.org/v0/amp-render-1.0.js"
    ></script>
    <style amp-custom>
      p {
        font-size: 20px;
        margin: 4px 0 32px;
      }
    </style>
  </head>
  <body>
    <h1>amp-render with images</h1>
    <amp-render
      binding="always"
      src="./images.json"
      layout="responsive"
      height="10000"
      width="500"
    >
      <template type="amp-mustache">
        {{#images}}
        <amp-img src="{{urls.picsum}}" height="200" width="200"></amp-img>
        <p>
          By: {{author}} (See on <a href="{{urls.unsplash}}">Unsplash.com</a>)
        </p>
        {{/images}}
      </template>
    </amp-render>
  </body>
</html>