V6 Clearleft Patterns

Srcset 

<img class="srcset" src="/v6-assets/img/case300w.jpg" sizes="(min-width: 1220px) 1100px, calc(93.78vw - 25px)" srcset="        /v6-assets/img/case300w.jpg 300w,
            /v6-assets/img/case600w.jpg 600w,
            /v6-assets/img/case1000w.jpg 1000w,
            /v6-assets/img/case2000w.jpg 2000w,
    " alt="" loading="lazy">
 
{% if imageList is iterable %}
 <img class="srcset" src="{{ imageList[0].src }}" sizes="(min-width: 1220px) 1100px, calc(93.78vw - 25px)" srcset="{% for image in imageList %}
        {{ image.src }} {{ image.size }},
    {% endfor %}" alt="{{ alt }}" loading="lazy">
{% else %}
 <img class="srcset" src="{{ imageList }}" alt="{{ alt }}" loading="lazy">
{% endif %}
 
{
  "imageList": [
    {
      "src": "/v6-assets/img/case300w.jpg",
      "size": "300w"
    },
    {
      "src": "/v6-assets/img/case600w.jpg",
      "size": "600w"
    },
    {
      "src": "/v6-assets/img/case1000w.jpg",
      "size": "1000w"
    },
    {
      "src": "/v6-assets/img/case2000w.jpg",
      "size": "2000w"
    }
  ]
}
  • Content: 
    .srcset {
  object-fit: cover;
  width: 100%;
}
  • URL: /components/raw/srcset/srcset.css
  • Filesystem Path: src/templates/components/srcset/srcset.css
  • Size: 48 Bytes

No notes defined.