support providing a metadata file

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!