66 lines
2.1 KiB
Plaintext
66 lines
2.1 KiB
Plaintext
{% 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>
|