Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
1 result

2017-03-20-photoswipe-gallery-sample.md

Blame
    • 2017-03-20-photoswipe-gallery-sample.md 2.26 KiB 
    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 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
    • Call {{</* load-photoswipe */>}} once anywhere you want on each page where you want to use PhotoSwipe