From 15850d3c9271f92d9c090b50bf060e91f5f37ebb Mon Sep 17 00:00:00 2001
From: Hyperling <me@hyperling.com>
Date: Wed, 19 Nov 2025 20:02:17 -0700
Subject: [PATCH] Add ability to have a fallback image if the primary no longer
 exists.

---
 layouts/shortcodes/image-with-fallback.html | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 layouts/shortcodes/image-with-fallback.html

diff --git a/layouts/shortcodes/image-with-fallback.html b/layouts/shortcodes/image-with-fallback.html
new file mode 100644
index 0000000..a65c795
--- /dev/null
+++ b/layouts/shortcodes/image-with-fallback.html
@@ -0,0 +1,17 @@
+{{   $url1 := .Get "img1" | default (.Get "url") | default (.Get 0)
+}}{{ $url2 := .Get "img2" | default (.Get "fallback") | default (.Get 1)
+}}{{ $alt := .Get "alt" | default (.Get 2)
+}}
+
+<!-- These do not seem to work. Using JS solution.
+<picture>
+  <source srcset="{{ $url1 }}">
+  <img src="{{ $url2 }}" alt="{{ $alt }}">
+</picture>
+<picture>
+  <source media="(min-width: 1px)" srcset="{{ $url1 }}">
+  <img src="{{ $url2 }}" alt="{{ $alt }}">
+</picture>
+-->
+
+<img src="{{ $url1 }}" alt="{{ $alt }}" onerror="this.onerror=null; this.src='{{ $url2 }}';">