{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" | remove: ".gif" -%}

<figure>
  <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" srcset="
      {% for i in site.imagemagick.widths -%}
      {{ img_path | relative_url }}-{{ i }}.webp {{i}}w,
      {% endfor -%}" 
      {% if include.sizes %} sizes="{{include.sizes}}" {% else %} sizes="95vw" {% endif %}
      type="image/webp"/>
    {% 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 %}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 %}
      {% if include.alt %}alt="{{ include.alt }}"{% endif %}
      {% if include.title %}title="{{ include.title }}"{% endif %}
      {% if include.zoomable %}data-zoomable{% endif %}
      onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
    />
  </picture>

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

</figure>