Photo gallery automation

Hugo is an amazing Static Site Generator (SSG) written in Go allowing any dev or tech enthusiast to easily generate rich websites / blogs without struggling with any CMS. Before digging into this section, I would recommend that you take a look at Hugo’s quick start

It should be as easy as putting images in a folder (Girlfriend while I was making her website)

One of the great things with Hugo is how easy it is to override / enrich existing themes with your own layouts.

Project Structure

content/
    galleries/
        some_gallery/
            img/
                some.png
                some.jpeg
            index.md
        _index.md
    _index.md
layouts/
    pages/
themes/
    some theme/
        layouts/
            pages/
config.toml

If you are new to Hugo, here are some landmarks:

• ./content/ is where you create your sections and pages. What makes a section a section and a page a page depends, broadly, on whether you put _index.md or index.md in a directory
• ./layouts/ is where we will enrich an existing theme with a new layout. hugo will treat ./layouts/ as if it were part of ./themes/<the_theme_you_choose>/layouts/
• ./themes/ is where your themes are, typically cloned as git submodules

git submodule add https://github.com/some/amazing_theme.git themes/amazing_theme

Dependencies

For this example, you need to add the following dependencies to your site. The way to do so might change from one theme to another. Ananke, for instance, provides a way to inject any <link> or <script> you want by writing them in layouts/partials/head-additions.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

Adapt with your theme.

The custom layout where the magic occurs

Here is ./layouts/page/gallery.html

<!--The original page layout from the theme -->
{{ define "header" }}{{ partial "page-header.html" . }}{{ end }}
{{ define "main" }}
<div class="flex-l mt2 mw8 center">
    <article class="center cf pv5 ph3 ph4-ns mw7">
      <header>
        <p class="f6 b helvetica tracked">
          {{ humanize .Section | upper  }}
        </p>
        <h1 class="f1">
          {{ .Title }}
        </h1>
      {{ partial "social-share.html" . }}
      </header>
      <div class="nested-copy-line-height lh-copy f4 nested-links nested-img mid-gray">
      <time class="f6 mv4 dib tracked" {{ printf `datetime="%s"` (.Date.Format "2006-01-02T15:04:05Z07:00") | safeHTMLAttr }}>
        {{- .Date.Format "January 2, 2006" -}}
      </time>
        {{ .Content }}
      </div>
    </article>
</div>

<!-- The addition -->
<section class="flex-ns flex-wrap justify-around center">
    {{ $images := (.Page.Resources.ByType "image") }}
    {{ with $images }}
    {{ range . }}
        {{ $resized := .Fill "600x460" }}
        <a href="{{ .Permalink }}"
        data-title="{{ with .Exif }}
                    {{ with .Tags.Artist }}
                        By {{.}}
                    {{end}}
                    {{ with .Tags.UserComment }}
                        <br>{{.}}
                    {{end}}
                    {{ with .Tags.Copyright }}
                        <br>{{.}}
                    {{end}}
                {{end}}" data-lightbox="x"><img src="{{ $resized.Permalink }}" /></a>
    {{ end }}
{{ end }}
</section>

{{ end }}

The <section> is the interesting part. This go template loops through all images found in the gallery and create their card using lightbox.

What about image titles? you might ask. This layout looks for the following Exif metadata in picture files:

• Exif.Image.Artist
• Exif.Photo.UserComment
• Exif.Image.Copyright

You just need to edit those before uploading your images using exiv2 or any gallery manager (or populate data-title with other values).

In this example <section> uses css classes from tachyons-css because ananke comes with this css framework. You will need to adapt ./layouts/page/gallery.html to the theme you choose.

To use the layout, simply indicate it in you gallery’s index.md

---
title: "Studio"
date: 2021-03-02T20:39:13+02:00
draft: false
type: page
layout: gallery
---