From 0a50d0214d5625f67ebf1e71677edc76d074e919 Mon Sep 17 00:00:00 2001
From: Max Mehl <mail@mehl.mx>
Date: Wed, 7 Feb 2024 21:32:54 +0100
Subject: [PATCH] add caption on slideshow and lightbox

---
 README.md                       |  6 +---
 assets/scss/snap-gallery.scss   | 50 ++++++++++++++++++++++-----------
 layouts/partials/lightbox.html  | 10 +++----
 layouts/partials/slideshow.html |  5 +++-
 4 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index 80ec032..9383399 100644
--- a/README.md
+++ b/README.md
@@ -20,11 +20,7 @@ Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes. Li
 - CSS and JS is automatically loaded the first time you use the `{{< snap-gallery >}}` shortcode on each page
 - Multiple galleries/slideshows per page supported, no interference
 - Automatic rotation of slideshow with a configurable interval. Can also be disabled.
-- Supports providing metadata such as `alt` and `title` attributes
-
-### Roadmap / untested
-
-- Captions
+- Supports providing metadata such as `alt` and `title` attributes as well as captions
 
 
 ## Installation
diff --git a/assets/scss/snap-gallery.scss b/assets/scss/snap-gallery.scss
index da5a148..dda81fb 100644
--- a/assets/scss/snap-gallery.scss
+++ b/assets/scss/snap-gallery.scss
@@ -82,7 +82,12 @@ $gap: var(--gap);
     /* stretch line height */
     height: 100%;
   }
+}
 
+// Disable cursor selection in lightbox and on slideshow, especially controls
+.snap-lightbox,
+.snap-slideshow {
+  user-select: none;
 }
 
 // /* Click on the complete background closes the lightbox */
@@ -111,29 +116,42 @@ $gap: var(--gap);
     max-height: 100%;
   }
 
-  // TODO: Untested
-  p {
-    color: #fff;
-    z-index: 810;
-    position: relative;
-  }
-
   @media screen and (max-width: 767px) {
     max-width: 80%;
   }
 }
 
-/* Number text (1/3 etc) */
-.snap-lightbox,
-.snap-slideshow {
-  user-select: none;
+/* Number text (1/3 etc) and captions*/
+.snap-numbertext {
+  position: absolute;
+  color: #f2f2f2;
+  background-color: #000;
+  font-size: 12px;
+  padding: 8px 12px;
+}
 
-  .numbertext {
-    color: #f2f2f2;
-    background-color: #000;
-    font-size: 12px;
-    padding: 8px 12px;
+.snap-caption {
+  bottom: 0;
+  color: #f2f2f2;
+  padding: 8px 0;
+  left: 10%;
+  width: 80%;
+  text-shadow: 1px 1px 10px #000;
+  font-weight: 700;
+  font-size: 1.1em;
+  text-align: center;
+
+  // As slideshow, position on picture on mid-screens and wider
+  .snap-slideshow & {
     position: absolute;
+
+    @media screen and (max-width: 767px) {
+      display: none;
+    }
+  }
+  // In lightbox, always show below picture
+  .snap-lightbox & {
+    position: relative;
   }
 }
 
diff --git a/layouts/partials/lightbox.html b/layouts/partials/lightbox.html
index 8aa0b8c..1ef3151 100644
--- a/layouts/partials/lightbox.html
+++ b/layouts/partials/lightbox.html
@@ -3,13 +3,16 @@
 <div class="snap-lightbox" id="snap-lightbox-{{ $galno }}">
   {{- range $i, $img := $imgs }}
   <div class="snap-lightbox-inner">
-    <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
+    <div class="snap-numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
     <img
       src="{{ relURL $img.src }}"
       {{ range $attr, $value := $img.html -}}
         {{ safeHTMLAttr $attr }}={{ $value }}
       {{ end -}}
     />
+    {{- with $img.html.title }}
+      <div class="snap-caption">{{ . }}</div>
+    {{- end }}
   </div>
   {{- end -}}
 
@@ -18,9 +21,4 @@
 
   <a class="snap-prev" onclick="moveLightboxItem({{ $galno }}, -1)"><span>&#10094;</span></a>
   <a class="snap-next" onclick="moveLightboxItem({{ $galno }}, 1)"><span>&#10095;</span></a>
-
-  {{/*  <!-- Caption text -->
-  <div class="caption-container">
-    <p id="caption"></p>
-  </div>  */}}
 </div>
diff --git a/layouts/partials/slideshow.html b/layouts/partials/slideshow.html
index 93c366c..032ba90 100644
--- a/layouts/partials/slideshow.html
+++ b/layouts/partials/slideshow.html
@@ -3,7 +3,10 @@
 <div class="snap-slideshow" id="snap-slideshow-{{ $galno }}" style="--columns:1;--min-width:0px;--gap:0px;--slideshow-width:{{ default "100%" .width }};--cursor:{{ .cursor }};--aspectratio:{{ safeCSS (default "16/10" .aspectratio) }};">
   {{- range $i, $img := $imgs }}
   <div class="snap-image">
-    <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
+    <div class="snap-numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
+    {{- with $img.html.title }}
+      <div class="snap-caption">{{ . }}</div>
+    {{- end }}
     <img
       src="{{ relURL $img.src }}"
       {{ range $attr, $value := $img.html -}}