Photoswipe Gallery Sample

Making a Gallery

Beautiful Hugo adds a few custom shortcodes created by Li-Wen Yip and Gert-Jan van den Berg for making galleries with PhotoSwipe.

Individual pictures

Example

The above gallery was created using the following shortcode:

{{< gallery caption-effect="fade" hover-effect="grow" >}}
  {{< figure thumb="-thumb" link="/img/pexels-bess-hamiti-36487.jpg" caption="Photo by Bess Hamiti from Pexels" >}}
  {{< figure thumb="-thumb" link="/img/pexels-pok-rie-5799946.jpg" caption="Photo by Pok Rie from Pexels" >}}
  {{< figure thumb="-thumb" link="/img/pexels-sharon-mccutcheon-1174932.jpg" caption="Photo by Sharon McCutcheon from Pexels" >}}
  {{< figure thumb="-thumb" link="/img/pexels-sharon-mccutcheon-1174952.jpg" caption="Photo by Sharon McCutcheon from Pexels" >}}
  {{< figure thumb="-thumb" link="/img/pexels-tim-mossholder-3578593.jpg" caption="Photo by Tim Mossholder from Pexels" >}}
  {{< figure thumb="-thumb" link="/img/pexels-tomasz-filipek-1637438.jpg" caption="Photo by Tomasz Filipek from Pexels" alt="Nintendo Entertainment System" >}}
{{< /gallery >}}

Full directory

Example

The above gallery was created using the following shortcode:

{{< gallery dir="/img/" />}}

Usage

For full details please see the hugo-easy-gallery GitHub page. Basic usages from above are:

  • Create a gallery with open and close tags {{< gallery >}} and {{< /gallery >}}
  • {{< figure src="image.jpg" >}} will use image.jpg for thumbnail and lightbox
  • {{< figure src="thumb.jpg" link="image.jpg" >}} will use thumb.jpg for thumbnail and image.jpg for lightbox
  • {{< figure thumb="-small" link="image.jpg" >}} will use image-small.jpg for thumbnail and image.jpg for lightbox
  • All the features/parameters of Hugo’s built-in figure shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, alt
  • {{< gallery caption-effect="fade" >}} will fade in captions for all figures in this gallery instead of the default slide-up behavior
  • Many gallery styles for captions and hover effects exist; view the hugo-easy-gallery GitHub for all options
  • Note that this theme will load the photoswipe gallery theme and scripts by default, no need to load photoswipe on your individual pages

Credit

All pictures above are from pexels.com.


See also