hugo-baguetteBox

This is a theme component for Hugo. It provides shortcodes to include an image gallery and lightbox powered by baguetteBox.js in a Hugo website.

Installation

Clone this git repository into your themes folder (or add it as a submodule if you're already using git):

git clone https://github.com/Schnouki/hugo-baguetteBox themes/baguettebox

Now add this theme component to your config.toml:

theme = ["baguettebox", "main-theme"]

Usage

In a post or page, you can add a gallery using the {{< gallery >}} shortcode, and images inside the gallery using the {{< galimg >}} shortcode:

{{< gallery >}}
  {{% galimg target="image01.png" title="This image has a title but no caption!" /%}}
  {{% galimg target="image02.png" %}}This image has a caption!{{% /galimg %}}
  {{% galimg target="image03.png" thumb="image03_thumb.png" %}}Don't generate the thumbnail for this one, use an existing file.{{% /galimg %}}
  {{% galimg target="image04.png" size="400x300" %}}Use a different size for the thumbnail…{{% /galimg %}}
  {{% galimg target="image05.png" size="400x300 BottomLeft q90 r90" %}}You can actually use any option supported by Hugo's image processing.{{% /galimg %}}
  {{% galimg target="image06.png" mode="resize" size="100x20" %}}You can also choose the image processing method.{{% /galimg %}}
{{< /gallery >}}

As can be seen, the gallery shortcode does not accept any parameter.

The galimg shortcode, however, accepts several parameters:

• target (required): name for the full-size image
• thumb (optional): name of the thumbnail. If missing, the thumbnail will be generated by Hugo using its image processing.
• size (optional): size for the generated thumbnail. This can actually be any valid image processing option. Defaults to 200x150 smart.
• mode (optional): method used to generate the thumbnail. Can be fill, fit or resize. Defaults to fill.

Gallery appearance

This component does not include a stylesheet for the gallery, you will need to add this to your site by yourself.

The generated HTML is very simple:

<div class="gallery">
  <a href="/path/to/fullsize-image.jpg" data-caption="Image caption" title="Image title">
    <img src="/path/to/thumbnail.jpg alt="Image title" />
  </a>
</div>

Here is a sample CSS that works well with the Minimo theme:

.gallery {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.gallery a {
    border: 0;
    margin-bottom: .5em;
}
.gallery img {
    border: .125em solid #bdbdbd;
}

Dependencies

This components includes baguetteBox.js, which is very small (less that 10 kB of JavaScript and 4 kB of CSS). It is only included on pages that need it, and has no external dependency at all.

To customize how it is loaded, you can overload the gallery/resources.html partial template. This way you can for instance load it from a CDN (instead of using the bundled version), or disable fingerprintint, or use Hugo Pipes to enable PostCSS or whatever you want.