Basic Folder Gallery in Hugo

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

Intro

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.

Howto

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

Create a shortcode:

themes/hugo-goa/layouts/shortcodes/foldergallery.html

that contains:

<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>

<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/>
        </a>
    {{ end }}
</div>

Include JQuery and Fancybox:

layouts/partials/footer.html
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.0/jquery.fancybox.min.css" />

Usage

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

Drop images in

content/gallery/

and generate the site.

Example: https://b4d.sablun.org/gallery/

See Also