53 lines
1.7 KiB
HTML
53 lines
1.7 KiB
HTML
|
{% set orig_thumb = src %}
|
||
|
|
{% if thumb %}
|
||
|
|
{% set orig_thumb = src |
|
||
|
|
replace(from=".jpg",to=thumb~".jpg") |
|
||
|
|
replace(from=".png",to=thumb~".png") %}
|
||
|
|
{% endif %}
|
||
|
|
{% set webp_thumb = thumb |
|
||
|
|
replace(from=".jpg",to=".webp") |
|
||
|
|
replace(from=".png",to=".webp") %}
|
||
|
|
{% set avif_thumb = webp_thumb |
|
||
|
|
replace(from=".webp",to=".avif") %}
|
||
|
|
|
||
|
|
{% set src_url = get_url(path=src) %}
|
||
|
|
{% set thumb_url = get_url(path=orig_thumb) %}
|
||
|
|
{% set webp_url = get_url(path=webp_thumb) %}
|
||
|
|
{% set avif_url = get_url(path=avif_thumb) %}
|
||
|
|
|
||
|
|
{% set img_data = get_image_metadata(path=src) %}
|
||
|
|
{% set thumb_data = get_image_metadata(path=orig_thumb) %}
|
||
|
|
{% set avif_data = get_image_metadata(path=avif_thumb,allow_missing=true) %}
|
||
|
|
{% set webp_data = get_image_metadata(path=webp_thumb,allow_missing=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"
|
||
|
|
>
|
||
|
|
<picture
|
||
|
|
|
||
|
|
class="thumb {%if avif_data %} avif{%endif%}{%if webp_data %} webp{%endif%}"
|
||
|
|
data-size="{{img_data.width}}x{{img_data.height}}"
|
||
|
|
>
|
||
|
|
{% if avif_data %}
|
||
|
|
<source srcset="{{avif_url}}" type="image/avif">
|
||
|
|
{% endif %}
|
||
|
|
{% if webp_data %}
|
||
|
|
<source srcset="{{webp_url}}" type="image/webp">
|
||
|
|
{% 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 href="/{{src_url}}" itemprop="contentUrl"></a>
|
||
|
|
{% if caption %}
|
||
|
|
<figcaption>
|
||
|
|
{{ caption | markdown | safe }}
|
||
|
|
</figcaption>
|
||
|
|
{% endif %}
|
||
|
|
</figure>
|
||
|
|
</div>
|