figure.liquid

{% assign img_path = include.path | remove: '.jpg' | remove: '.jpeg' | remove: '.png' | remove: '.tiff' | remove: '.gif' %}
{% assign parts = include.path | split: '.' %}
{% assign ext = parts.last %}

<figure
  {% if include.slot %}
    slot="{{ include.slot }}"
  {% endif %}
>
  <picture>
    <!-- Auto scaling with imagemagick -->
    <!--
      See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and
      https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images
    -->
    {% if site.imagemagick.enabled %}
      <source
        class="responsive-img-srcset"
        {% if ext == '.jpg' or ext == '.jpeg' or ext == '.png' or ext == '.tiff' or ext == '.gif' %}
          srcset="{% for i in site.imagemagick.widths %}{{ img_path | relative_url }}-{{ i }}.webp {{i}}w,{% endfor %}"
          type="image/webp"
        {% else %}
          srcset="{{ include.path | relative_url }}"
        {% endif %}
        {% if include.sizes %}
          sizes="{{include.sizes}}"
        {% else %}
          sizes="95vw"
        {% endif %}
      >
    {% endif %}
    <img
      src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
      {% if include.class %}
        class="{{ include.class }}"
      {% endif %}
      {% if include.width %}
        width="{{ include.width }}"
      {% else %}
        width="100%"
      {% endif %}
      {% if include.height %}
        height="{{ include.height }}"
      {% else %}
        height="auto"
      {% endif %}
      {% if include['min-width'] or include['min-height'] or include['max-width'] or include['max-height'] %}
        style="
          {% if include['min-width'] %}
            min-width: {{ include.min-width }};
          {% endif %}
          {% if include['min-height'] %}
            min-height: {{ include.min-height }};
          {% endif %}
          {% if include['max-width'] %}
            max-width: {{ include.max-width }};
          {% endif %}
          {% if include['max-height'] %}
            max-height: {{ include.max-height }};
          {% endif %}
        "
      {% endif %}
      {% if include.alt %}
        alt="{{ include.alt }}"
      {% endif %}
      {% if include.title %}
        title="{{ include.title }}"
      {% endif %}
      {% if include.zoomable %}
        data-zoomable
      {% endif %}
      {% if include.loading %}
        loading="{{ include.loading }}"
      {% elsif site.lazy_loading_images %}
        loading="lazy"
      {% endif %}
      onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
    >
  </picture>

  {% if include.caption %}
    <figcaption class="caption">{{ include.caption }}</figcaption>
  {% endif %}
</figure>