Basic Folder Gallery in Hugo
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/