65 lines
1.9 KiB
HTML
65 lines
1.9 KiB
HTML
|
{% set avif_src = src |
|
||
|
|
replace(from=".jpg",to=".avif") |
|
||
|
|
replace(from=".png",to=".avif") %}
|
||
|
|
{% set webp_src = src |
|
||
|
|
replace(from="avif",to=".webp") %}
|
||
|
|
|
||
|
|
{% 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 webp_thumb = avif_thumb |
|
||
|
|
replace(from=".avif",to=".webp") %}
|
||
|
|
|
||
|
|
{% set src_url = get_url(path=src) %}
|
||
|
|
{% set avif_url = get_url(path=avif_src) %}
|
||
|
|
{% set webp_url = get_url(path=webp_src) %}
|
||
|
|
|
||
|
|
{% set thumb_url = get_url(path=orig_thumb) %}
|
||
|
|
{% set avif_thumb_url = get_url(path=avif_thumb) %}
|
||
|
|
{% set webp_thumb_url = get_url(path=webp_thumb) %}
|
||
|
|
|
||
|
|
{% set img_data = get_image_metadata(path=src) %}
|
||
|
|
{% set avif = true %}
|
||
|
|
{% if webp %}
|
||
|
|
{% set avif = false %}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% set thumb_data = get_image_metadata(path=orig_thumb) %}
|
||
|
|
<div class="box fancy-figure"
|
||
|
|
style="--w:{{ thumb_data.width }};--h:{{ thumb_data.height }};max-width:{{ thumb_data.width }}px;"
|
||
|
|
>
|
||
|
|
<figure
|
||
|
|
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-pswp-avif="{{ avif_url }}"{%endif%}
|
||
|
|
{%if webp %}data-pswp-webp="{{ webp_url }}"{%endif%}
|
||
|
|
>
|
||
|
|
<picture class="thumb">
|
||
|
|
{% if avif %}
|
||
|
|
<source srcset="{{ avif_thumb_url }}" type="image/avif">
|
||
|
|
{% endif %}
|
||
|
|
{% if webp %}
|
||
|
|
<source srcset="{{ webp_thumb_url }}" type="image/webp">
|
||
|
|
{% endif %}
|
||
|
|
<source srcset="{{ thumb_url }}" type="image/{{ thumb_data.format }}">
|
||
|
|
<img itemprop="thumbnail" loading="lazy" src="{{thumb_url}}"
|
||
|
|
{% if alt %} alt="{{ alt | markdown | striptags }}{% endif %}"/>
|
||
|
|
</picture>
|
||
|
|
</a>
|
||
|
|
{% if caption %}
|
||
|
|
<figcaption>
|
||
|
|
{{ caption | markdown | safe }}
|
||
|
|
</figcaption>
|
||
|
|
{% endif %}
|
||
|
|
</figure>
|
||
|
|
</div>
|