image template example 2.js

image template example 2.js

  function pictureTemplate(photo) {
    return html`
      <picture class="picture lazy">
        <data-src
          sizes="100vw"
          srcset="${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=768&q=${SETTINGS.quality} 768w,
                  ${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=992&q=${SETTINGS.quality} 992w,
                  ${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=1200&q=${SETTINGS.quality} 1200w,
                  ${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=1536&q=${SETTINGS.quality} 1536w,
                  ${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=1984&q=${SETTINGS.quality} 1984w,
                  ${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=2400&q=${SETTINGS.quality} 2400w,
                  ${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=2880&q=${SETTINGS.quality} 2880w,
                  ${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=4000&q=${SETTINGS.quality} 4000w"
          type="${SETTINGS.mimeType}"
        ></data-src>
        <data-img
          src="${photo.fields.file.url}?fm=jpg&w=1200&q=${SETTINGS.quality}"
          alt="${photo.fields.description || "☯"}"
          width="${photo.fields.file.details.image.width}"
          height="${photo.fields.file.details.image.height}"
          type="image/jpeg">
        </data-img>
    </picture>`;
  }