zola-ludwig/templates/shortcodes/figure.html

{% set avif_src = src |
replace(from=".jpg",to=".avif") |
replace(from=".png",to=".avif") %}

{% set orig_thumb = src %}
{% if thumb %}
	{% set orig_thumb = src |
	replace(from=".jpg",to=thumb~".jpg") |
	replace(from=".png",to=thumb~".png") %}
{% endif %}
{% set avif_thumb = orig_thumb |
replace(from=".jpg",to=".avif") |
replace(from=".png",to=".avif") %}

{% set src_url = get_url(path=src) %}
{% set avif_url = get_url(path=avif_src) %}

{% set thumb_url = get_url(path=orig_thumb) %}
{% set avif_thumb_url = get_url(path=avif_thumb) %}

{% set img_data = get_image_metadata(path=src) %}
{% set avif_data = true %}

{% set thumb_data = get_image_metadata(path=orig_thumb) %}
{% set avif_thumb_data = true %}
<div class="box"
	style="--w:{{thumb_data.width}};--h:{{thumb_data.height}};"
>
<figure
	class="instant"
	style="max-width:calc({{thumb_data.width}}px + 4vw)"
	itemprop="associatedMedia" itemscope
	itemtype="http://schema.org/ImageObject"
>
	<a href="{{src_url}}" itemprop="contentUrl"
		data-pswp-width="{{img_data.width}}" data-pswp-height="{{img_data.height}}"
		{%if avif_data %}data-pswp-avif="{{avif_url}}"{%endif%}
	>
		<picture class="thumb">
			{% if avif_thumb_data %}
			<source srcset="{{avif_thumb_url}}" type="image/avif">
			{% endif %}
			<source srcset="{{thumb_url}}" type="image/{{thumb_data.format}}">
			<img itemprop="thumbnail" src="{{thumb_url}}"
			{% if caption %} alt="{{caption | markdown | striptags}}{% endif %}"/>
		</picture>
	</a>
	{% if caption %}
	<figcaption>
		{{ caption | markdown | safe }}
	</figcaption>
	{% endif %}
</figure>
</div>