Thanks for liwenyip/hugo-easy-gallery & Zebradil · Pull Request #48 .

Now, we could use {{< gallery >}} shortcode in hugo-theme-jane.

Normal Image

This is an image in static/image folder.

1

![This is an image in `static/image` folder.](https://cdn.agou-ops.cn/violet-evergarden/Screenshot_2020-03-29-21-40-19.png)

This is an image in <code>static/image</code> folder.

{{< figure >}} shortcode

figure image with title

1

{{< figure src="/image/test.png" title="figure image with title" >}}

figure image with caption

1

{{< figure src="/image/example.jpg" caption="figure image with caption figure image with caption figure image with caption figure image with caption figure image with caption" >}}

more {{< figure >}} shortcode usage

Specifying your image files:

  • {{< figure src="thumb.jpg" link="image.jpg" >}} will use thumb.jpg for thumbnail and image.jpg for lightbox
  • {{< figure src="image.jpg" >}} or {{< figure link="image.jpg" >}} will use image.jpg for both thumbnail and lightbox
  • {{< figure link="image.jpg" thumb="-small" >}} will use image-small.jpg for thumbnail and image.jpg for lightbox

Optional parameters:

  • 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
  • size (e.g. size="1024x768") pre-defines the image size for PhotoSwipe. Use this option if you don’t want to pre-load the linked image to determine its size.
  • class allows you to set any custom classes you want on the <figure> tag.

Optional parameters for standalone {{< figure >}} shortcodes only (i.e. don’t use on {{< figure >}} inside {{< gallery >}} - strange things may happen if you do):

  • caption-position and caption-effect work the same as for the {{< gallery >}} shortcode (see below).
  • width defines the max-width of the image displayed on the page. If using a thumbnail for a standalone figure, set this equal to your thumbnail’s native width to make the captions behave properly (or feel free to come up with a better solution and submit a pull request :-)). Also use this option if you don’t have a thumbnail and you don’t want the hi-res image to take up the entire width of the screen/container.
  • class="no-photoswipe" prevents a <figure> from being loaded into PhotoSwipe. If you click on the figure you’ll instead a good ol’ fashioned hyperlink to a bigger image (or - if you haven’t specified a bigger image - the same one).

{{< gallery >}} shortcode

To specify a directory of image files:

1

{{< gallery dir="/img/your-directory-of-images/" >}}
  • The images are automatically captioned with the file name.
  • [image].jpg is used for the hi-res image, and [image]-thumb.jpg is used for the thumbnails.
  • If [image]-thumb.jpg doesn’t exist, then [image].jpg will be used for both hi-res and thumbnail images.
  • The default thumbnail suffix is -thumb, but you can specify a different one e.g. thumb="-small" or thumb="_150x150".

To specify individual image files

1
2
3
4
5

{{< gallery >}}
  {{< figure src="image1.jpg" >}}
  {{< figure src="image2.jpg" >}}
  {{< figure src="image3.jpg" >}}
{{< /gallery >}}

Optional parameters:

  • caption-position - determines the captions’ position over the image. Options:
    • bottom (default)
    • center
    • none hides captions on the page (they will only show in PhotoSwipe)
  • caption-effect - determines if/how captions appear upon hover. Options:
    • slide (default)
    • fade
    • none (captions always visible)
  • hover-effect - determines if/how images change upon hover. Options:
    • zoom (default)
    • grow
    • shrink
    • slideup
    • slidedown
    • none
  • hover-transition - determines if/how images change upon hover. Options:
    • not set - smooth transition (default)
    • none - hard transition