fix REUSE compliance

A complete rewrite of the gallery plugin:

* Using flexbox
* Using lightweight JS for lightbox to avoid anchor links, and allow full rotation
* Add slideshow as an additional field
* Make many more things configurable
* Better support for dirs, allow mixed paths
* Translatable captions for many files using metadata files
* SCSS instead of CSS

Reviewed-on: #1
Co-authored-by: Max Mehl <mail@mehl.mx>
Co-committed-by: Max Mehl <mail@mehl.mx>

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

assets/scss/old.css

@@ -1,282 +0,0 @@
-/*
-  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,3 +1,8 @@
+/*
+  SPDX-FileCopyrightText: 2024 Max Mehl <https://mehl.mx>
+  SPDX-License-Identifier: MIT
+*/
+
 $gap: var(--gap);
 
 .snap-gallery,
@@ -116,13 +121,6 @@ $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%;
   }

layouts/partials/gallery.html

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

layouts/partials/slideshow.html

@@ -1,3 +1,7 @@
+<!--
+  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) }};">

layouts/shortcodes/figure.html

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