DEV Community

Thomas Sarmis
Thomas Sarmis

Posted on • Updated on • Originally published at greekdeveloper.com

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>
        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://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.css" />

    <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/>            
            </a>
        {{ end }}
    </div>

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="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.js"></script>

Enter fullscreen mode Exit fullscreen mode

Usage

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

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

Sample

Originally posted at greek developer

Discussion (4)

Collapse
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?

Collapse
studiostark1 profile image
Michael Stark • Edited on

Hi,
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... ;) ???

Collapse
sarmis profile image
Thomas Sarmis Author

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

Collapse
sheldonhull profile image
Sheldon

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