This is a theme component for hugo.

This component contains a shortcode to include a gallery in your .md files.

The gallery is rendered using autogenerated thumbnails arranged in a grid. With a click on the images a lightbox is opend an all images can be viewed fullscreen.

Clone this git repository into your themes folder.

git clone https://github.com/mfg92/hugo-shortcode-gallery.git

Next edit your projects config.toml and add this theme component to your themes:

theme = ["your-main-theme", "hugo-shortcode-gallery"]

To read about hugos theme components and how to use them have a look at https://gohugo.io/themes/theme-components/.

Here is an usage example:

{{< gallery match="images/*" rowHeight="150" margins="5" resizeOptions="x300 q90 Lanczos" >}}

This will generate a gallery containing all images of the folder images. The folder must be next to the .md file where this gallery is used in.

The rowHeight paramter determines the height of the rows that are displayed while the margin paramter defines the gap between the images.

A thumbnail is generated using the resizeOptions paramter, they are handed over to Hugos image processing function. In the example above the generated thumbnails have a width of 300 pixel and a height depending on the original aspect ratio. The JPEG image quality is 90% and the scaling uses the high quality Lanczos filter.

As many websites/themes already include jQuery, this theme component will use the available jQuery lib. If the page does not already use jQuery the paramter loadJQuery=true must be used to instruct the theme component to load the provided jQuery lib.

This component requieres a hugo version >= 0.48.

The component uses (and includes) Justified Gallery to render the images between the text and Swipebox to show them fullscreen. Also jquery-migrate-1.4 is used to let Swipebox work with newer jQuery versions.