support providing a metadata file

README.md

@@ -20,7 +20,11 @@ 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 as well as captions
+- Supports providing metadata such as `alt` and `title` attributes
+
+### Roadmap / untested
+
+- Captions
 
 
 ## Installation

assets/scss/old.css

@@ -0,0 +1,282 @@
+/*
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
+  SPDX-License-Identifier: MIT
+*/
+
+/** GENERAL FIGURE LAYOUT **/
+
+figure {
+  max-width: 90%;
+  margin: 10px auto;
+  display: block;
+  text-align: center;
+}
+
+/* make box with box-shadow only as large as image */
+.snap-wrapper {
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  display: inline-block;
+}
+
+figure a:hover {
+  text-decoration: none;
+}
+
+figure img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+figure.sm {
+  max-width: 30%;
+}
+
+figure.md {
+  max-width: 50%;
+}
+
+figure.lg {
+  max-width: 70%;
+}
+
+figure.pull-right {
+  padding: 10px 0 10px 10px;
+}
+
+figure.pull-left {
+  padding: 10px 10px 10px 0;
+}
+
+figure figcaption {
+  background-color: rgba(0, 0, 0, 0.5);
+  display: block;
+  font-size: .8em;
+  padding: 1px;
+  position: static;
+  text-align: center;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: #FFF;
+}
+
+/* Extra classes for figures */
+figure.no-border .snap-wrapper {
+  box-shadow: none;
+}
+
+/** GALLERY MARKUP **/
+.snap-gallery {
+  margin: 10px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* avoid sick effects of inline-block on gallery elements */
+.snap-gallery .snap-wrapper {
+  display: block;
+}
+
+.snap-gallery figure {
+  position: relative;
+  width: 30%;
+  padding-bottom: 30%;
+  margin: 1%;
+  text-align: left;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),0 2px 4px 0 rgba(0,0,0,0.19);
+}
+
+.snap-gallery figcaption {
+  position: absolute;
+}
+
+.snap-gallery img.snap-thumb {
+  position: absolute;
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+
+.snap-gallery figure img.snap-thumb:hover {
+  transform: scale(1.02);
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+@media screen and (max-width: 767px) {
+  .snap-gallery figure {
+    width: 45%;
+    padding-bottom: 45%;
+    margin: 2%
+  }
+}
+@media screen and (max-width: 479px) {
+  .snap-gallery figure {
+    width: 90%;
+    padding-bottom: 90%;
+    margin: 3%;
+  }
+}
+
+/** LIGHTBOX MARKUP **/
+
+.snap-lightbox {
+  /** Default lightbox to hidden */
+  display: none;
+
+  /** Position and style */
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0,0.8);
+}
+
+/* effects when "activating" the figure */
+.snap-lightbox:target {
+  /** Remove default browser outline */
+  outline: none;
+
+  /** Unhide lightbox **/
+  display: block;
+}
+
+/* Click on the complete background closes the lightbox */
+/* Exception: arrow in gallery, they have higher z-index */
+a.snap-lightbox-close {
+  position: fixed;
+  z-index: 800;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+}
+
+/* keep lightbox in middle. TODO: hacky, and not realibly in middle */
+.snap-lightbox::before {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  width: 0;
+  /* adjust for white space between pseudo element and next sibling */
+  margin-right: -.25em;
+  /* stretch line height */
+  height: 100%;
+}
+
+/* Container for image */
+.snap-lightbox-inner {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: normal;
+  max-width: 90%;
+  max-height: 80%;
+  height: 100%;
+}
+
+.snap-lightbox-inner p {
+  color: #fff;
+  z-index: 810;
+  position: relative;
+}
+
+/* prev/next arrows & close button */
+
+.snap-lightbox-close-button {
+  position: fixed;
+  z-index: 950;
+  width: 5%;
+  height: calc(5vw); /* ~5% width */
+  right: 0;
+  top: 0;
+}
+
+.snap-lightbox-x::after {
+  content: "\00d7"; /* This will render the 'X' */
+  font-size: 3em;
+  font-style: normal;
+  font-weight: 700;
+  color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.snap-lightbox-close-button:hover .snap-lightbox-x::after {
+  color: #fff;
+  transition: all 0.25s ease;
+}
+
+.snap-lightbox-prev, .snap-lightbox-next  {
+  position: fixed;
+  z-index: 800;
+  width: 5%;
+  height: 100%;
+  text-align: center;
+  top: 0;
+}
+
+.snap-lightbox-prev {
+  left: 0;
+}
+
+.snap-lightbox-next {
+  right: 0;
+}
+
+.snap-lightbox-arrow {
+  display: inline-block;
+  position: fixed;
+  top: 50%;
+  z-index: 900;
+  border: solid #000;
+  border-width: 0 7px 7px 0;
+  display: inline-block;
+  padding: 1%;
+}
+
+span .snap-lightbox-arrow {
+  border-color: #5e5e5e;
+}
+
+.snap-lightbox-prev .snap-lightbox-arrow {
+  left: 2%;
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+
+.snap-lightbox-next .snap-lightbox-arrow {
+  right: 2%;
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+
+a.snap-lightbox-prev:hover > .snap-lightbox-arrow,
+a.snap-lightbox-next:hover > .snap-lightbox-arrow {
+  border-color: #fff;
+  transition: all 0.25s ease;
+}
+
+@media screen and (max-width: 767px) {
+  .snap-lightbox-inner {
+    max-width: 80%;
+  }
+  .snap-lightbox-prev, .snap-lightbox-next {
+    width: 10%;
+  }
+  .snap-lightbox-close-button {
+    width: 10%;
+    height: calc(10vw); /* ~10% width */
+  }
+}

assets/scss/snap-gallery.scss

@@ -1,8 +1,3 @@
-/*
-  SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
-  SPDX-License-Identifier: MIT
-*/
-
 $gap: var(--gap);
 
 .snap-gallery,
@@ -87,12 +82,7 @@ $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 */
@@ -121,42 +111,29 @@ $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) and captions*/
+/* Number text (1/3 etc) */
-.snap-numbertext {
+.snap-lightbox,
-  position: absolute;
+.snap-slideshow {
+  user-select: none;
+
+  .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;
   }
 }
 

layouts/partials/gallery.html

@@ -1,7 +1,3 @@
-<!--
-  SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
-  SPDX-License-Identifier: MIT
--->
 {{- $imgs := .imgs -}}
 {{- $galno := .galno -}}
 <div class="snap-gallery" style="--columns:{{ default 4 .columns }};--min-width:{{ default "200px" .minwidth }};--gap:10px;--cursor:{{ .cursor }};--aspectratio:{{ safeCSS (default "16/10" .aspectratio) }};">

layouts/partials/lightbox.html

@@ -1,22 +1,15 @@
-<!--
-  SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
-  SPDX-License-Identifier: MIT
--->
 {{- $imgs := .imgs -}}
 {{- $galno := .galno -}}
 <div class="snap-lightbox" id="snap-lightbox-{{ $galno }}">
   {{- range $i, $img := $imgs }}
   <div class="snap-lightbox-inner">
-    <div class="snap-numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
+    <div class="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 -}}
 
@@ -25,4 +18,9 @@
 
   <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>

layouts/partials/slideshow.html

@@ -1,16 +1,9 @@
-<!--
-  SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
-  SPDX-License-Identifier: MIT
--->
 {{- $imgs := .imgs -}}
 {{- $galno := .galno -}}
 <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="snap-numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
+    <div class="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 -}}

layouts/shortcodes/figure.html

@@ -0,0 +1,68 @@
+<!-- Images used to open the lightbox -->
+<div class="row">
+  <div class="column">
+    <img src="img1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
+  </div>
+  <div class="column">
+    <img src="img2.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
+  </div>
+  <div class="column">
+    <img src="img3.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
+  </div>
+  <div class="column">
+    <img src="img4.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
+  </div>
+</div>
+
+<!-- The Modal/Lightbox -->
+<div id="myModal" class="modal">
+  <span class="close cursor" onclick="closeModal()">&times;</span>
+  <div class="modal-content">
+
+    <div class="mySlides">
+      <div class="numbertext">1 / 4</div>
+      <img src="img1.jpg" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">2 / 4</div>
+      <img src="img2.jpg" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">3 / 4</div>
+      <img src="img3.jpg" style="width:100%">
+    </div>
+
+    <div class="mySlides">
+      <div class="numbertext">4 / 4</div>
+      <img src="img4.jpg" style="width:100%">
+    </div>
+
+    <!-- Next/previous controls -->
+    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+    <a class="next" onclick="plusSlides(1)">&#10095;</a>
+
+    <!-- Caption text -->
+    <div class="caption-container">
+      <p id="caption"></p>
+    </div>
+
+    <!-- Thumbnail image controls -->
+    <div class="column">
+      <img class="demo" src="img1.jpg" onclick="currentSlide(1)" alt="Nature">
+    </div>
+
+    <div class="column">
+      <img class="demo" src="img2.jpg" onclick="currentSlide(2)" alt="Snow">
+    </div>
+
+    <div class="column">
+      <img class="demo" src="img3.jpg" onclick="currentSlide(3)" alt="Mountains">
+    </div>
+
+    <div class="column">
+      <img class="demo" src="img4.jpg" onclick="currentSlide(4)" alt="Lights">
+    </div>
+  </div>
+</div>

layouts/shortcodes/snap-gallery.html

@@ -1,7 +1,3 @@
-<!--
-  SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
-  SPDX-License-Identifier: MIT
--->
 {{/*  Count number of gallery on page  */}}
 {{- $.Page.Scratch.Add "gallerycount" 1 -}}
 {{- $galno := $.Page.Scratch.Get "gallerycount" -}}

static/js/snap-gallery.js

@@ -1,8 +1,3 @@
-/*
-  SPDX-FileCopyrightText: 2023 Max Mehl <https://mehl.mx>
-  SPDX-License-Identifier: MIT
-*/
-
 // Variables
 var lightbox_baseid = "snap-lightbox-";
 var slideshow_baseid = "snap-slideshow-";