86 lines
2.9 KiB
Plaintext
86 lines
2.9 KiB
Plaintext
{% 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 == 'gif' or ext == 'jpeg' or ext == 'jpg' or ext == 'png' or ext == 'tiff' %}
|
||
|
||
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>
|