Search code examples
amp-html

How to set layout for all amp-img?


I want all amp-img instances on a page to use layout="responsive". Is there a way to do this without setting it on each of them?

The following does not work:

amp-img{
    layout: responsive;
}

Solution

  • It has to be specified inside the tag itself for each image. Not sure what your application is, but if you're outputting a bunch of images on one page you could make use of an amp-list and mustache tags to define the image url and dimensions if they're different for each image through a JSON file. Then you only have to do the amp-img tag once and let amp-list take care of looping out the images.

    That's how I output all the images on this page of the site I manage.