DEV Community

Thomas Sarmis
Thomas Sarmis

Posted on • Updated on • Originally published at

Building a folder-based gallery for Hugo

A custom hugo shortcode that builds an image gallery from images inside a folder

Source Code

Image Discovery & Gallery Layout

    <!-- "site root"\layouts\shortcodes\foldergallery.html -->

    <style> {
            display: flex;
            flex-wrap: wrap;
        } a {
            flex-grow: 1;
            object-fit: cover;
            margin: 2px;
            display: flex;
        } a img {            
            height: 200px;
            object-fit: cover;
            flex-grow: 1;


    <link rel="stylesheet" href="" />

    <div class="gallery">
        {{ $path := print "content\\" .Page.Dir (.Get "src") }}
        {{ $url  := print .Page.URL (.Get "src") }}
        {{ range (readDir $path)  }}            
            {{ $src := print $url "/" .Name }}                
            <a data-fancybox="gallery" href="{{ $src }}">
                <img src="{{ $src }}">  <br/>            
        {{ end }}

Enter fullscreen mode Exit fullscreen mode

Fancy Box

1. Replace theme's jquery with 3.3.1 version
2. Add the fancybox3 script
<script src="" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src=""></script>

Enter fullscreen mode Exit fullscreen mode


  { {< foldergallery src="imgs" >} }
Enter fullscreen mode Exit fullscreen mode

Will create an image gallery with the images in the imgs folder


Originally posted at greek developer

Top comments (4)

summittdweller profile image
Mark McFate

This is cool. I tried building a vacation image site using this... while I was on vacation, and failed. Wondering if there is a "complete" implementation of this code somewhere in Github or a similar repository?

studiostark1 profile image
Michael Stark • Edited

came from Jekyll (switched after two weeks for Hugo and never regret it).

I got your Foldergallery running. OK the DOM elements are created but the images are not loaded. Tried a little bit with the .PageURL but didn't get the URL pointing in my folder directory.

What therm do i have to search for, the Hugo documentation is a mouthful... ;) ???

sarmis profile image
Thomas Sarmis

I would suggest comparing the src attribute of dom elements (imgs) against the actual path of the images in the public folder

sheldonhull profile image

That's pretty cool. I'll have to give this a shot.