diff --git a/README.md b/README.md index 1039d78..21538e5 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes. Li - **slideshow** displaying only one image at a time with the ability to navigate - **gallery** displaying all selected pictures next to each other - All pictures can be expanded on click in a lightbox -- Manually select the images you want to display, or provide the path to a directory to use all images inside +- Manually select the images you want to display, or provide the path to a directory to use all images inside. This can be combined! - Next/prev buttons in slideshow and lightbox views - The gallery is responsive, images are scaled/cropped to fill 16:10 tiles - CSS and JS is automatically loaded the first time you use the `{{< snap-gallery >}}` shortcode on each page @@ -25,8 +25,6 @@ Automagical css image gallery in [Hugo](https://gohugo.io/) using shortcodes. Li - Captions / title - Alternative text -- Automatically detect whether source is an image or directory -- Support a micture of dirs and single images ## Installation @@ -42,13 +40,12 @@ theme = [ "hugo-sustain", "hugo-snap-gallery" ] Quickstart: - `{{< snap-gallery src="image1.jpg, image2.png" >}}`: Display these two images in **gallery** mode -- `{{< snap-gallery src="image1.jpg image2.png" mode="slideshow" >}}`: Display these two images in **slideshow** mode -- `{{< snap-gallery src="img/page1" isdir=true >}}`: Display all images in the folder `img/page1` in **gallery** mode +- `{{< snap-gallery src="image1.jpg, image2.png" mode="slideshow" >}}`: Display these two images in **slideshow** mode +- `{{< snap-gallery src="img/folder1/, image2.png" >}}`: Display all images in the directory `img/folder1` and the single image `image2.png` in **gallery** mode All parameters: - `src`: Must contain either a comma-separated list of paths to images, or a directory path containing images. -- `isdir`: Whether `src` contains one or multiple individual images, ow a whole directory. Default: `false`. - `lightbox`: Whether a click on an image shall open a lightbox modal. Default: `true`. - `mode`: Can be either `gallery` or `slideshow`. Default: `gallery`. - For gallery mode: diff --git a/layouts/shortcodes/snap-gallery.html b/layouts/shortcodes/snap-gallery.html index 1c98466..8c42d47 100644 --- a/layouts/shortcodes/snap-gallery.html +++ b/layouts/shortcodes/snap-gallery.html @@ -13,20 +13,33 @@ {{/* Initialise index of this gallery */}} -{{/* Initialise variables holding image paths */}} +{{/* Initialise variables holding image paths and extension */}} +{{ $imgs_collect := slice }} {{ $imgs := slice }} +{{ $img_exts := slice ".jpg" ".jpeg" ".png" ".gif" ".webp" ".tiff" }} -{{/* Get/sanitise image paths */}} -{{ if .Params.isdir }} - {{/* Get images from folder, put into map */}} - {{ $imgdir := print "/static/" .Params.src }} - {{- range readDir $imgdir -}} - {{ $imgs = $imgs | append (print $.Params.src "/" .Name ) }} +{{/* Get images from src Param, separated by comma */}} +{{ range (split .Params.src ",") }} + {{ $img := (trim . " ") }} + {{ $img_static := print "/static/" $img }} + {{/* Only proceed when path exists */}} + {{ if os.FileExists $img_static }} + {{/* If current item is a directory, range each of them, and add with full path to the slice */}} + {{ if (os.Stat $img_static).IsDir }} + {{- range readDir $img_static -}} + {{ $imgs_collect = $imgs_collect | append (path.Join $img .Name ) }} + {{ end }} + {{/* If a single file, just add it to the slice */}} + {{ else }} + {{ $imgs_collect = $imgs_collect | append $img }} + {{ end }} {{ end }} -{{ else }} - {{/* Get images from src Param, separated by comma */}} - {{ range (split .Params.src ",") }} - {{ $imgs = $imgs | append (trim . " ") }} +{{ end }} + +{{/* Filter collected files by whether they are an image. Throw others out */}} +{{ range $imgs_collect }} + {{ if in $img_exts (lower (path.Ext .)) }} + {{ $imgs = $imgs | append . }} {{ end }} {{ end }}