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
Top comments (4)
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?
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... ;) ???
I would suggest comparing the src attribute of dom elements (imgs) against the actual path of the images in the public folder
That's pretty cool. I'll have to give this a shot.