I recently switch this site from Wordpress to Hugo - and the site with Danish content too. It was mostly easy and straight forward, but initially there was a few features missing (by the very nature of it being a static site) and some things I needed to look into once the switch had happened. One of these was a gallery function to present images (photos mostly).

Gallery options….

There are various ways to have a gallery on a site, and one of the pains I had with wordpress, was changing strategies over time, which left me with several plugins needed to handle the historic gallery choices.

I would like a simple, nice looking solution, and so far the best starting point was a blog post with a simple way to make a hugo shortcode to handle galleries.

Pluging it in

It started with the originial layouts/shortcodes/foldergallery.html file from the post, but made a two small changes:

• the version of Fancybox was updated to use the most recent version.
• I wanted to support webp-images.

To support these to changes the foldergallery file needed a few changes:

<style>
    div.gallery {
       display: flex;
       flex-wrap: wrap;
    }
    div.gallery a {
        flex-grow: 1;
        object-fit: cover;
        margin: 2px;
        display: flex;
    }
    div.gallery a img {            
        height: 200px;
        object-fit: cover;
        flex-grow: 1;
    }  
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <div class="gallery">
          {{ $base := .Get "src" }}
      {{ $path := print "static/" (.Get "src") }}
      {{ range (readDir $path) }}
          {{- $thumbext := "-thumb" }}
          {{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
          {{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp)" }}<!-- is the current file an image? -->
          {{- if and $isimg (not $isthumb) }}
          {{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}
              <a data-fancybox="gallery" href="/{{ $base }}/{{ .Name }}">
                  <img src="/{{ $base  }}/{{ $thumb }}">  <br/>            
              </a>
          {{- end }}
      {{ end }}
      </div>

In addition to the layouts/shortcodes/foldergallery.html above, you also need to make sure that the following line is loaded (prefferably in the buttom) of all pages (including a gallery):

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

With the above, you should be set to go and able to include galleries on you posts and pages in hugo.

The actual inclusion of gallery goes like this:

• Upload images to somewhere in the static folder. I use “static/galleries/galleryname.
• Create thumbnails and convert images as needed.
• Include the gallery in the post as desired.
• Publish the site as usual.

To include the gallery use the following statement in the page:

{{< foldergallery src=“galleries/galleryname/” >}}

The galleryname is the folder containing all the images, which you want in the embedded gallery.

Preparing the images

I usually place the (jpg) images in the gallery folder and have resized the images to the size I want to upload. Then I run this one (long) line:

for i in `find . -type f ! -name "*-thumb.jpg" -name "*.jpg"`; do echo $i; if [ -f ${i%.*}-thumb.jpg ]; then continue; fi; convert $i -resize 352x352 ${i%.*}-thumb.jpg; done

This creates a thumbnail of every image in the folder.

Then I convert the images to webp format and delete the JPG images. Run the regular hugo command to generate the site and upload the files.

If the “convert” command is avaialble, you need to install ImageMagick. On a Debian Linux, it’s matter of running:

sudo apt-get install imagemagick

ImageMagick on MacOS should be available through Homebrew.

If you like to see the result, see this page on my site.