Posted onAug 30, 2018 • Edited onMar 17, 2019 • Originally published atgreekdeveloper.com

Building a folder-based gallery for Hugo

#hugo #gallery

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.gallerya{flex-grow:1;object-fit:cover;margin:2px;display:flex;}div.galleryaimg{height:200px;object-fit:cover;flex-grow:1;}</style><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.css"/><divclass="gallery">        {{ $path := print "content\\" .Page.Dir (.Get "src") }}        {{ $url  := print .Page.URL (.Get "src") }}        {{ range (readDir $path)  }}                        {{ $src := print $url "/" .Name }}<adata-fancybox="gallery"href="{{ $src }}"><imgsrc="{{ $src }}"><br/></a>        {{ end }}</div>

Fancy Box

<!--1. Replace theme's jquery with 3.3.1 version2. Add the fancybox3 script--><scriptsrc="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script><scriptsrc="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 atgreek developer

Top comments(4)

Mark McFate

Location
Iowa
Work
Digital Library Applications Developer at Grinnell College
Joined
Jun 25, 2019

• Jun 25 '19

Copy link

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?

Michael Stark

Artdesigner, trying to look cool

Location
Germany
Joined
Sep 5, 2019

• Sep 5 '19• Edited onSep 5• Edited

Copy link

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