Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Justified Image Gallery as Hugo shortcode

Forked and making some changes to better support how I'm using page resources in a Hugo Page bundle.

Usage { {< foldergallery src="imgs" >} } I changed this to;

{ {< foldergallery src="." >} } Which picks up all the files in my leaf page bundle including

I want to change the "imgs" in the shortcode to something like;

{{ with .Resources.ByType "image" }} {{ end }}

Or modify the foldergallery.html

I posted the question;

<!-- \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;
<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 }}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment