Collecting my attempts to improve at tech, art, and life

My Sloppy Floppy Fingerless Mitten

Tags: knitting glove hugo craft

I knit a fingerless mitten. Mistakes were made. I also figured out some stuff about Hugo Page Bundles and image processing.


I modified a mitten pattern from Knitter’s Handy Book of Patterns. The book’s template approach works for me. I adjusted the pattern for fingerless mittens — my preference.

I will knit the mittens again, making additional adjustments.

It isn’t all negative. I kept consistent gauge, and the stretchy bind off stayed stretchy.


I wrote this post to learn image processing in Hugo 0.36. My suggestion: follow the documentation, especially where it says to name your content file

Maybe I can say a little more about that. I’ll just focus on the bits relevant to Page Resources, since the rest of it is specific to the details of my site.

Up until today my site images relied on a Python script to generate post cover images and thumbnails from master images in static/. Hugo 0.36 can now create those images itself, but you have to organize your content and its images correctly.

Post organization

Instead of a single file, your post becomes a directory, with for the content itself.

+-> craft
  +-> 2018
    +-> my-sloppy-floppy-fingerless-mitten
      +-> cover.jpg


Posts might have a primary images, which Hugo displays at the top of the post itself, and as a thumbnail in summary pages. I named the image cover.jpg.

Cover Image

If I have a cover image, Hugo’s image processing creates a version of the image 800 pixels wide. Display this image, along with a link to the original.

{{- $description := .Title -}}
{{- $coverImage := .Page.Resources.GetMatch "cover*" -}}
{{- if $coverImage -}}
  {{- $image := $coverImage.Resize "800x" -}}
    <img src="{{ $image.RelPermalink }}" alt="{{ $description }}"
         height="{{ $image.Height }}" width="{{ $image.Width }}">
      {{ $description }}<br>
      <a href="{{ $coverImage.RelPermalink }}" target="_blank">
        (see full size in new window)
{{- else -}}
  legacy cover image handling
{{- end -}}


If I have a cover image, I create 128 pixel square smart crop — a thumbnail which should show the original’s most interesting part. The thumbnail is presented along with a link to the post itself.

{{ $title := .Title }}
{{- $coverImage := .Page.Resources.GetMatch "cover*" -}}
{{- if $coverImage -}}
  {{- $thumbnail := $coverImage.Fill "128x128" -}}
  <a href="{{ .Permalink }}" title="{{ $title }}">
    <img class="summary-thumbnail"
         src="{{ $thumbnail.RelPermalink }}"
         alt="{{ $title }}"
         height="{{ $thumbnail.Height }}"
         width="{{ $thumbnail.Width }}">
{{- else -}}
  legacy thumbnail handling
{{- end -}}


This flow replaces my Python image script and a fair amount of templating logic. Once I remove the legacy templating logic, I’ll put the cover image and thumbnail dimensions in site config, making it easier to redesign page layout later.

I better get to it.

Added to vault 2024-01-15. Updated on 2024-02-01