README.md

@@ -20,11 +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
 
 ### Roadmap / untested
 
-- Captions / title
-- Alternative text
+- Captions
 
 
 ## Installation
@@ -45,9 +45,10 @@ Quickstart:
 
 All parameters:
 
-- `src`: Must contain either a comma-separated list of paths to images, or a directory path containing images.
+- `src`: Must contain either a comma-separated list of paths to images, or a directory path containing images. Note that the paths are absolute, so imagine a `/` in front of them. Also note that the shortcode assumes that they are all stored in `/static/`.
 - `lightbox`: Whether a click on an image shall open a lightbox modal. Default: `true`.
 - `aspectratio`: Define the aspect ratio of the images in the slideshow/gallery. Default: `16/10`.
+- `metadata`: See below for how to add metadata to your files. Default: `map[]`.
 - `mode`: Can be either `gallery` or `slideshow`. Default: `gallery`.
 - For gallery mode:
   - `columns`: Amount of columns the images are displayed in. Default: `4`.
@@ -59,6 +60,28 @@ All parameters:
 
 **Note: Boolean values (`true`/`false`) must be provided without surrounding `"` characters!** `lightbox=false` disables the lightbox, while `lightbox="false"` does not.
 
+### Metadata
+
+Using separate data files, you can provide metadata to the image files. Imagine using the following shortcode: `{{< snap-gallery src="image1.jpg, img/folder1/" metadata="images.en" >}}`.
+
+This would assume you have a file named `/data/images.en.yaml`. It may contain the following data:
+
+```yaml
+- src: image1.jpg
+  html:
+    alt: Alternative text
+    title: Title, text displayed when hovering
+- src: img/folder1/foo.png
+  html:
+    alt: Alternative text for the first picture in the image folder
+```
+
+This way, you can add any HTML attributes to the `<img>` element for the images you describe in the metadata file. In this example, you add this for two images, one of them is in a folder whose path you provided. You don't have to add information for all files.
+
+This flexible way allows you to also translate metadata. Just use different `metadata` values to the shortcodes depending on the language.
+
+Note that a `title` is also taken as a caption to the picture in order to reduce duplicated work.
+
 ## Credits
 
 The original inspiration for this shortcode came from [Li-Wen Yip's easy-gallery](https://github.com/liwenyip/hugo-easy-gallery). The first major version of this was already a 90% rewrite, and the current one has even less to do with it. However, the rewrite took some inspirations from [W3Schools](https://www.w3schools.com/howto/howto_js_lightbox.asp), thanks!

layouts/partials/gallery.html

@@ -1,9 +1,14 @@
 {{- $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) }};">
-  {{- range $i, $img := $imgs -}}
+  {{- range $i, $img := $imgs }}
   <div class="snap-image">
-    <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
+    <img
+      src="{{ relURL $img.src }}"
+      {{ range $attr, $value := $img.html -}}
+        {{ safeHTMLAttr $attr }}={{ $value }}
+      {{ end -}}
+      onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});" />
   </div>
-  {{- end -}}
+  {{- end }}
 </div>

layouts/partials/lightbox.html

@@ -4,7 +4,12 @@
   {{- range $i, $img := $imgs }}
   <div class="snap-lightbox-inner">
     <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
-    <img src="{{ $img }}" style="width:100%">
+    <img
+      src="{{ relURL $img.src }}"
+      {{ range $attr, $value := $img.html -}}
+        {{ safeHTMLAttr $attr }}={{ $value }}
+      {{ end -}}
+    />
   </div>
   {{- end -}}
 

layouts/partials/slideshow.html

@@ -4,9 +4,14 @@
   {{- range $i, $img := $imgs }}
   <div class="snap-image">
     <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
-    <img src="{{ $img }}" onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});">
+    <img
+      src="{{ relURL $img.src }}"
+      {{ range $attr, $value := $img.html -}}
+        {{ safeHTMLAttr $attr }}={{ $value }}
+      {{ end -}}
+      onclick="openLightbox({{ $galno }});openLightboxItem({{ $galno }}, {{ add $i 1 }});" />
   </div>
-  {{- end -}}
+  {{- end }}
 
   <a class="snap-prev" onclick="moveSlideshowItem({{ $galno }}, -1)"><span>&#10094;</span></a>
   <a class="snap-next" onclick="moveSlideshowItem({{ $galno }}, 1)"><span>&#10095;</span></a>

layouts/shortcodes/snap-gallery.html

@@ -18,6 +18,12 @@
 {{- $imgs := slice -}}
 {{- $img_exts := slice ".jpg" ".jpeg" ".png" ".gif" ".webp" ".tiff" -}}
 
+{{/*  Get information from optional metadata file  */}}
+{{- $metadata := dict -}}
+{{- with .Params.metadata -}}
+  {{- $metadata = index $.Site.Data . -}}
+{{- end -}}
+
 {{/*  Get images from src Param, separated by comma  */}}
 {{- range (split .Params.src ",") -}}
   {{- $img := (trim . " ") -}}
@@ -36,10 +42,19 @@
   {{- end -}}
 {{- end -}}
 
-{{/*  Filter collected files by whether they are an image. Throw others out  */}}
+{{/*  Filter collected files, store them as slice of dicts/maps  */}}
 {{- range $imgs_collect -}}
+  {{/*  Only process files if they are recognised as an image  */}}
   {{- if in $img_exts (lower (path.Ext .)) -}}
-    {{- $imgs = $imgs | append . -}}
+    {{/*  Create a dict holding path and optional metadata  */}}
+    {{- $imgdict := dict "src" . -}}
+    {{/*  If metadata for this image path found, add all of it to dict  */}}
+    {{- $img_metadata := where $metadata "src" . -}}
+    {{- with $img_metadata -}}
+      {{- $imgdict = merge $imgdict (index . 0) -}}
+    {{- end -}}
+    {{/*  Add final dict to slice  */}}
+    {{- $imgs = $imgs | append $imgdict -}}
   {{- end -}}
 {{- end -}}
 
@@ -63,6 +78,6 @@
 {{- end -}}
 
 {{/*  The Modal/Lightbox  */}}
-{{- if $lightbox -}}
+{{ if $lightbox -}}
 {{- partial "lightbox" (dict "galno" $galno "imgs" $imgs) -}}
 {{- end -}}