1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-30 15:22:09 +00:00
seirdy.one/layouts/shortcodes/picture.html
Rohan Kumar 1f8fb5f83a
New shortcode for <picture>
This shortcode handles dark/light variants of AVIF, WebP, and PNG
images.
2021-01-27 13:47:46 -08:00

47 lines
1.7 KiB
HTML

{{ $light_png := resources.GetMatch (printf "/p/%s.png" (.Get "name")) | resources.Fingerprint "md5" -}}
{{ $light_webp := resources.GetMatch (printf "/p/%s.webp" (.Get "name")) | resources.Fingerprint "md5" -}}
{{ $light_avif := resources.GetMatch (printf "/p/%s.avif" (.Get "name")) | resources.Fingerprint "md5" -}}
{{ $dark_png := resources.GetMatch (printf "/p/%s_dark.png" (.Get "name")) | resources.Fingerprint "md5" -}}
{{ $dark_webp := resources.GetMatch (printf "/p/%s_dark.webp" (.Get "name")) | resources.Fingerprint "md5" -}}
{{ $dark_avif := resources.GetMatch (printf "/p/%s_dark.avif" (.Get "name")) | resources.Fingerprint "md5" -}}
<picture>
{{ with $dark_avif -}}
<source
srcset="{{ .RelPermalink }}"
type="image/avif"
media="(prefers-color-scheme: dark)">
{{ end -}}
{{ with $dark_webp -}}
<source
srcset="{{ .RelPermalink }}"
type="image/webp"
media="(prefers-color-scheme: dark)">
{{ end -}}
{{ with $dark_png -}}
<source
srcset="{{ .RelPermalink }}"
type="image/png"
media="(prefers-color-scheme: dark)">
{{ end -}}
{{ with $light_avif -}}
<source
srcset="{{ .RelPermalink }}"
type="image/avif"
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
{{ end -}}
{{ with $light_webp -}}
<source
srcset="{{ .RelPermalink }}"
type="image/webp"
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
{{ end -}}
{{ with $light_png -}}
<source
srcset="{{ .RelPermalink }}"
type="image/png"
media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
{{ end -}}
<img
width="{{ $light_png.Width }}"
src="{{ $light_png.RelPermalink }}" alt='{{ .Get "alt" }}'>
</picture>