loading...

Building a folder-based gallery for Hugo

sarmis profile image Thomas Sarmis Originally published at greekdeveloper.com Updated on ・1 min read

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>

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>

Usage

  { {< foldergallery src="imgs" >} }

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

Sample

Originally posted at greek developer

Discussion

pic
Editor guide
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

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.