Complete rewrite #1
@@ -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:
|
||||
|
||||
@@ -13,20 +13,33 @@
|
||||
{{/* Initialise index of this gallery */}}
|
||||
<script>imageIndex[{{ $galno }}] = 1;</script>
|
||||
|
||||
{{/* 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 }}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user