From 1f8fb5f83acc4fc1f8a587cea3b6bb792edfdb68 Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Wed, 27 Jan 2021 13:47:46 -0800
Subject: [PATCH] New shortcode for <picture>

This shortcode handles dark/light variants of AVIF, WebP, and PNG
images.
---
 layouts/shortcodes/picture.html | 47 +++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 layouts/shortcodes/picture.html

diff --git a/layouts/shortcodes/picture.html b/layouts/shortcodes/picture.html
new file mode 100644
index 0000000..a0ba134
--- /dev/null
+++ b/layouts/shortcodes/picture.html
@@ -0,0 +1,47 @@
+{{ $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>