This is a test for my first post I will leave the photoswipe stuff from template in there for now.
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