A Static Art Gallery with Hugo

This is not the first time, and won’t be the last time I post about JS-free, bloat-free web. In this post I’d like to share how I build a art collection site for my gf.

the site: https://gi.nseng.art

I’m not a web designer and I’m not a frontend engineer. Yet I’ve wrote a lot about static blogging. I do this to make a point for the bloat-free web.

# A simple grid layout

I adopted the example from here. Later I’ll show how to plug this into the hugo system.

# Content Organization

Now, this is the tricky part. Simply put, hugo is opt for text, not blob objects like images or videos.

• For a formal presentation, artworks needs to documented with their meta data e.g. time of making, author, material, techniques, etc..
• The need for meta data management is similar to the need for bibliography management in acdemia.
• It’s far more complicated than the usual approach : putting a piece of artwork in a post with markdown image via [alt text]("url" "desc"). For example, each media could appear in different places, with a consistent meta data display. Copying around the hyperlinks is a dead end.

are you talking about wordpress? - Yes I am. Wordpress makes it pretty easy to manage media files and I find it the optimal CMS for artists. But I won’t use it, again, to make a point.

Now, what about content organization?

A typical hugo content structure would look like this:

content
|- category1
    |- post1.md
    |- post2.md
    |- post3
        |- _index.md
        |- sub1.md
        |- sub2.md
        |- img1.jpg
        |- ...
        ...

The problem here is obvious: the assets like media are bounded to posts and there is not a central place for meta data management.

So instead, I do this:

content
|- category1
|   |- post1.md
|   |- post2.md
|   ...
|- static
|   |- media files
|   |- ...
|
|- data
    |- meta.json

the meta.json would be our central place for metadata management. It will look like this:

[

    {
        "id"            : "aq2",
        "name"          : "",
        "desc"          : "A question 2, 2024, Oil on canvas, 70x55cm",
        "image_url"     : "/A_Question_2/A_Question_2.jpg",
        "series"        : "A Question 2",
        "series_url"    : "/arts/a_question_2/",
        "tags"          : ["painting"]
    },
    {
        "id"            : "aq1"
        "name"          : "",
        "desc"          : "A question 1, 2024, Oil on canvas, 160x114cm",
        "image_url"     : "/A_Question_1/A_Question_1.jpg",
        "series"        : "A Question 1",
        "series_url"    : "/arts/a_question_1/",
        "tags"          : ["painting"]
    },
    ...
]

• each media may belong to a serie
• each piece of a serie may have its own name
• each media is identified by its file path (its relative url, same as its relative path to static/)
• each media is also identified by the id: this is handy to include media via shortcodes
• each media may be linked to a post (series_url)
• each media may have one or multiple tags (as in “categories”).

# hugo layouts and partials

Now let’s plug the metadata into hugo partials:

a gallery of ALL artworks:

layout/gallery/list.html (only showing relevant parts)

1
2
3

{{ $gl := site.Data.gl_all }}
<!-- filter the list here -->
{{ partial "gallery_grid.html" $gl}}

layout/partials/

<div class="gallery-grid" style="max-width: 80%; margin:auto">
    {{ range . }}
      <figure class="gallery-frame">
          {{with .video_url}}
          <video class="gallery-img" playsinline="" controls="">
              <source src="{{.}}" type="video/mp4">
          </video>
          {{else}}
          <a href="{{.image_url}}" target="_blank">
          <img class="gallery-img"
                src="{{.image_url}}.tn.jpg"
                alt="{{.desc}}"
                title="{{.desc}}">
          </a>
          {{end}}
          <figcaption> <a href ="{{.series_url}}">{{.series}}</a>
              // <i>{{.desc}}</i>

              <div class="tags">
                  {{range .tags}} <a href="/tags/{{.}}"> #{{.}} </a>
                  {{end}}
              </div>
          </figcaption>
     </figure>
    {{end}}
</div> <!--gallery-grid-->

Sub-gallery : filter the json data:

e.g. layouts/paintint/list.html

<center><h1>PAINTINGS</h1></center>
{{ $gl := where site.Data.gl_all "tags" "intersect" (slice "painting")}}
{{ partial "gallery_grid.html" $gl}}

# Thumbnails

It’s obvious that we shouldn’t use hi-res pictures for a gallery grid view. I have a simple script to generate thumbnails. The thumbnails are store to the same path as the original, with a suffix .tn.jpg. This makes it easier for templating.

#!/usr/bin/bash
DIR=$1
target_dirs=( "$@" )
echo "making thumbnails : NO RECURSION!"
gen_thumb_for_dir() {
    local dir=$1
    if [ ! -d "$dir" ]; then
        echo "[ERROR] $DIR does not exist."
        return
    fi
    rm $dir/*.tn.jpg
    targets=($(find $dir \( -iname "*.png" -o -iname "*.jpg" -o -iname "*.jpeg" \)))
    for i in "${targets[@]}"
    do
        echo "PROCESSING $i to $i.tn.jpg"
        convert $i -resize 1280x1280 -strip $i.tn.jpg
    done
}
for i in "${target_dirs[@]}"
do
    gen_thumb_for_dir $i
done

# Add media to post via shortcode and ID

layouts/shortocodes/media.html

{{ $gl := site.Data.gl_all }}
{{ $id := .Get "id" }}
{{ range $gl }}
    {{ if eq .id $id }}
        {{ $t := ""}}
        {{ if .name}}
            {{$t = printf "%s - %s" .name .desc}}
        {{else}}
            {{$t = .desc}}
        {{ end }}
        <p class="md__image">
        <img src="{{.image_url}}" alt="{{$t}}"  title="{{$t}}" />
        <div class="img-cap">{{$t}}</div>
        </p>
        {{ else }}
    {{ end }}
{{ end}}

to use in a post:

{{<media id="aq2">}}

# TODOs : a CMS