Basic Folder Gallery in Hugo

PUBLISHED ON 08/01/2020 — EDITED ON 09/01/2020 — DEVELOPMENT


I needed a gallery, that could replace my Instagram account. We all know about privacy issues and stuff like that, so here is a little semi-solution. One, that provides simple image publishing, by dropping them in a specific folder.

TODO: Auto resize and compress everything in this folder via system cronjob.


As a basis, I have used this article with some minor changes.

Create a shortcode:


that contains:

<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 (.Get "src") }}
    {{ range (readDir $path) }}
        {{ $src := print $url "/" .Name }}
        <a data-fancybox="gallery" href="{{ $src }}" data-caption="{{ .Name }}">
            <img src="{{ $src }}" alt="{{ .Name }}" title="{{ .Name }}" >  <br/>
    {{ end }}

Include JQuery and Fancybox:

<script src="" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src=""></script>
<link rel="stylesheet" href="" />


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

Drop images in


and generate the site.


See Also