From b8b3ad503c63cdb35b0124576584d8efa796780d Mon Sep 17 00:00:00 2001
From: Luca Zeuch <l-zeuch@email.de>
Date: Sat, 11 Jan 2025 19:33:42 +0100
Subject: [PATCH] images: wrap images in a lightbox

Wrap images in a lightbox, increasing them to full-screen size when
clicked. There are JavaScript solutions available (e.g. lightbox2)[^0],
though I opted for a purely CSS-based approach.[^1]

[^0]: https://lokeshdhakar.com/projects/lightbox2/
[^1]: https://codesalad.dev/blog/how-to-create-an-image-lightbox-in-pure-css-25

Signed-off-by: Luca Zeuch <l-zeuch@email.de>
---
 assets/scss/components/_images.scss        | 37 ++++++++++++++++++++++
 layouts/_default/_markup/render-image.html | 17 ++++++++++
 2 files changed, 54 insertions(+)

diff --git a/assets/scss/components/_images.scss b/assets/scss/components/_images.scss
index ab4b238..c992ca5 100644
--- a/assets/scss/components/_images.scss
+++ b/assets/scss/components/_images.scss
@@ -25,3 +25,40 @@ figcaption {
   margin-top: 0.5rem;
   font-style: italic;
 }
+
+/* CSS-only lightbox. See https://codesalad.dev/blog/how-to-create-an-image-lightbox-in-pure-css-25 */
+.lightbox {
+  /* Default to hidden */
+  display: none;
+
+  /* Overlay entire screen */
+  position: fixed;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  /* A bit of padding around image */
+  padding: 1em;
+
+  /* Translucent background */
+  background: rgba(0, 0, 0, 1);
+}
+
+/* Unhide the lightbox when it's the target */
+.lightbox:target {
+  display: block;
+}
+
+.lightbox span {
+  /* Full width and height */
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  /* Size and position background image */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 2f084ea..73e8939 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -108,7 +108,12 @@
   {{- end }}
 {{- end }}
 
+{{- $lightbox := true }}
+
 {{- /* Render image element. */ -}}
+{{- if $lightbox -}}
+<a href="#{{ print $id "-lightbox" }}">
+{{- end }}
 <img
   {{- range $k, $v := $attrs }}
     {{- if or $v (eq $k "alt") }}
@@ -116,3 +121,15 @@
     {{- end }}
   {{- end -}}
 >
+{{- if $lightbox -}}
+</a>
+<a href="javascript:history.back();" class="lightbox" id="{{ print $id "-lightbox" }}">
+  <img
+  {{- range $k, $v := $attrs }}
+    {{- if or $v (eq $k "alt") }}
+      {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+    {{- end }}
+  {{- end -}}
+>
+</a>
+{{- end }}