diff --git a/README.md b/README.md index 9d347d3..80ec032 100644 --- a/README.md +++ b/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 `` 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! diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html index 85b03c9..624981d 100644 --- a/layouts/partials/gallery.html +++ b/layouts/partials/gallery.html @@ -1,9 +1,14 @@ {{- $imgs := .imgs -}} {{- $galno := .galno -}}
- {{- range $i, $img := $imgs -}} + {{- range $i, $img := $imgs }}
- +
- {{- end -}} + {{- end }}
diff --git a/layouts/partials/lightbox.html b/layouts/partials/lightbox.html index 5d13e96..8aa0b8c 100644 --- a/layouts/partials/lightbox.html +++ b/layouts/partials/lightbox.html @@ -4,7 +4,12 @@ {{- range $i, $img := $imgs }}
{{ add $i 1 }} / {{ len $imgs }}
- +
{{- end -}} diff --git a/layouts/partials/slideshow.html b/layouts/partials/slideshow.html index ce3798f..93c366c 100644 --- a/layouts/partials/slideshow.html +++ b/layouts/partials/slideshow.html @@ -4,9 +4,14 @@ {{- range $i, $img := $imgs }}
{{ add $i 1 }} / {{ len $imgs }}
- +
- {{- end -}} + {{- end }} ❮ ❯ diff --git a/layouts/shortcodes/snap-gallery.html b/layouts/shortcodes/snap-gallery.html index 871bd98..3b81f70 100644 --- a/layouts/shortcodes/snap-gallery.html +++ b/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 -}}