squashed commit

_includes/figure.liquid

@@ -0,0 +1,84 @@
+{% 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.url %}{{ include.url }}{% elsif 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>