layouts/_default/_markup/render-image.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{{ $src := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}

{{ if $src }}
<figure>
	{{ $data := newScratch }}

	{{ if gt $src.Width 1100 }}
	{{ $data.Set "webp" ($src.Resize "960x webp q90") }}
	{{ $data.Set "fallback" ($src.Resize "960x q90") }}
	{{ else }}
	{{ $data.Set "webp" ($src.Resize (printf "%dx%d webp q90" $src.Width $src.Height)) }}
	{{ $data.Set "fallback" ($src.Resize (printf "%dx%d q90" $src.Width $src.Height)) }}
	{{ end }}

	{{ $webp := $data.Get "webp" }}
	{{ $fallback := $data.Get "fallback" }}

	<a href="{{ $src }}">
		<picture>
			<source srcset="{{ $webp.RelPermalink }}" type="image/webp">
			<img src="{{ $fallback.RelPermalink }}" alt="{{ .Text }}" loading="lazy" decoding="async" width="{{ $src.Width }}"
				height="{{ $src.Height }}" />
		</picture>
	</a>
	{{ with .Title }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{end}}