redstrate.com/themes/red/layouts/partials/render-art.html

{{/* Partial used to display a thumbnail of an artwork. */}}

{{ $full := printf "%s/thumb/%s.avif" $.Site.Params.image_host .Params.slug }}
{{ $jpeg := printf "%s/thumb/%s.jpg" $.Site.Params.image_host .Params.slug }}

<a aria-label="Gallery Item" class="no-decoration grid-item" href="{{ .RelPermalink }}">

{{ $title := .Title }}
{{ $year := .Date.Format "2006" }}

{{ with $full }}
        {{ if $.Params.threed }}
                {{ with resources.Get "3d.png" }}
                        <img alt="3D cube icon" title="Viewable 3D" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
                {{ end }}
        {{ end }}

        {{ if $.Params.comic }}
                {{ with resources.Get "comic.png" }}
                        <img alt="Comic icon" title="Viewable Comic" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
                {{ end }}
        {{ end }}

        {{ if $.Params.animation }}
                {{ with resources.Get "play-circle.png" }}
                        <img alt="Play animation icon" title="Viewable Animation" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
                {{ end }}
        {{ end }}

        <picture>
                <source srcset="{{ $full }}" type="image/avif" width="{{ $.Params.thumb_width }}" height="{{ $.Params.thumb_height }}"/>
                <img style="width: 100%; height: auto;" alt="{{ $.Params.alt_text }}" title="{{ $title }} ({{ $year }})" width="{{ $.Params.thumb_width }}" height="{{ $.Params.thumb_height }}" src="{{ $jpeg }}"/>
        </picture>
{{ end }}
</a>