2019-10-20 22:27:27 +02:00
<!--
2020-03-09 13:20:20 +01:00
SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl .mx>
2019-10-20 22:27:27 +02:00
SPDX-License-Identifier: MIT
-->
# hugo-snap-gallery
2024-02-05 12:15:56 +01:00
Automagical css image gallery in [Hugo ](https://gohugo.io/ ) using shortcodes. Lightweight, slim and fully local JavaScript.
2019-10-20 22:27:27 +02:00
2020-03-09 13:20:20 +01:00
## Features
2019-10-20 22:27:27 +02:00
2024-02-05 12:15:56 +01:00
- Custom `{{< snap-gallery >}}` shortcode that allows to display multiple images
- Two modes:
- **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
- 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
- Multiple galleries/slideshows per page supported, no interference
- Automatic rotation of slideshow with a configurable interval. Can also be disabled.
### Roadmap / untested
- Captions / title
- Alternative text
- Disable lightbox
- Automatically detect whether source is an image or directory
- Support a micture of dirs and single images
2019-10-20 22:27:27 +02:00
## Installation
2020-03-09 13:20:20 +01:00
Use this like an additional Hugo theme, so add it to the `theme` config. Example:
```
theme = [ "hugo-sustain", "hugo-snap-gallery" ]
```
2019-10-20 22:27:27 +02:00
2024-02-05 12:15:56 +01:00
## `{{< snap-gallery >}}` shortcode usage
2019-10-20 22:27:27 +02:00
2024-02-05 12:15:56 +01:00
Quickstart:
2019-10-20 22:27:27 +02:00
2024-02-05 12:15:56 +01:00
- `{{< 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" >}}` : Display all images in the folder `img/page1` in **gallery ** mode
2019-10-20 22:27:27 +02:00
2024-02-05 12:15:56 +01:00
All parameters:
2019-10-20 22:27:27 +02:00
2024-02-05 12:15:56 +01:00
- `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` .
- `mode` : Can be either `gallery` or `slideshow` . Default: `gallery` .
- For gallery mode:
- `columns` : Amount of columns the images are displayed in. Default: `4` .
- `minwidth` : Minimum width that each image shall have, e.g. `150px` or `30%` . May conflict with the desired amount of columns. Default: `200px` .
- For slideshow mode:
- `slideshowwidth` : Width of slideshow, e.g. `300px` or `80%` . Default: `100%` .
- `slideshowrotate` : Whether the slideshow shall automatically rotate through the images. Default: `true` .
- `slideshowrotate_timer` : Interval of automatic slideshow rotation (if enabled), in milliseconds. Default: `5000` (5 seconds).
2019-10-20 22:27:27 +02:00
2020-03-09 13:20:20 +01:00
## Credits
2024-02-05 12:15:56 +01:00
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!
2019-10-20 22:27:27 +02:00
## License
2020-03-09 13:20:20 +01:00
This repository follows the REUSE best practices for clear copyright and licensing information. The license texts for all used licenses can be found in the LICENSES/ directory under the root of this repository. Visit [reuse.software ](https://reuse.software ) for more information.
The main license of this repo is MIT.
