Forked from
Scientific Computing and Engineering Group / Teaching / online_learning
144 commits behind the upstream repository.
-
GitLab authoredb6a11977
title: Photoswipe Gallery Sample
subtitle: Making a Gallery
date: 2017-03-20
tags: ["example", "photoswipe"]
Beautiful Hugo adds a few custom shortcodes created by Li-Wen Yip and Gert-Jan van den Berg for making galleries with PhotoSwipe .
{{< gallery caption-effect="fade" >}} {{< figure thumb="-thumb" link="/img/hexagon.jpg" >}} {{< figure thumb="-thumb" link="/img/sphere.jpg" caption="Sphere" >}} {{< figure thumb="-thumb" link="/img/triangle.jpg" caption="Triangle" alt="This is a long comment about a triangle" >}} {{< /gallery >}} {{< load-photoswipe >}}
Example
The above gallery was created using the following shortcodes:
{{</* gallery caption-effect="fade" */>}}
{{</* figure thumb="-thumb" link="/img/hexagon.jpg" */>}}
{{</* figure thumb="-thumb" link="/img/sphere.jpg" caption="Sphere" */>}}
{{</* figure thumb="-thumb" link="/img/triangle.jpg" caption="Triangle" alt="This is a long comment about a triangle" */>}}
{{</* /gallery */>}}
{{</* load-photoswipe */>}}
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 useimage.jpg
for thumbnail and lightbox -
{{</* figure src="thumb.jpg" link="image.jpg" */>}}
will usethumb.jpg
for thumbnail andimage.jpg
for lightbox -
{{</* figure thumb="-small" link="image.jpg" */>}}
will useimage-small.jpg
for thumbnail andimage.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
- Call
{{</* load-photoswipe */>}}
once anywhere you want on each page where you want to use PhotoSwipe