Custom Hugo Figure Snippet

Posted: 11 Apr 2020
Updated: 23 Feb 2022

Hugo is a really nice way to write a blog - your writing is stored as plain text and by using Markdown you can introduce some nice basic HTML formatting. Markdown allows you to have HTML inside the same file by adding the following flag to your config.toml file:

[markup.goldmark.renderer]
    unsafe=true

However, if you want to use Hugo’s functions inside HTML which is inside your Markdown file, that is not allowed. Enter, Hugo snippets ! In your theme (mine is called hugo-finn) create the directory layouts/shortcodes/ and inside this directory create a snippet file (mine is called figure.html).

These snippet files are special because any Hugo functions inside the snippet are parsed, before the snippet itself is parsed into the Markdown file. Read the full shortcode documentation here.

Here is how I call my snippet, where src, title, and author are the arguments passed to the figure.html snippet.

{{< figure name="" title="" author="" >}}

And, here is how the snippet works, where the main takeaway is {{ .Get "src" }} is how to get an argument input!

{{ $img := (index (.Page.Resources.Match (print (.Get "name") ".*")) 0) }}
{{ $img512 := (index (.Page.Resources.Match (print (.Get "name") "-512.webp")) 0) }}
{{ $img1024 := (index (.Page.Resources.Match (print (.Get "name") "-1024.webp")) 0) }}
{{ $img2048 := (index (.Page.Resources.Match (print (.Get "name") "-2048.webp")) 0) }}
<figure>
    <a href='{{ $img.Permalink }}' title='Full size image: {{ .Get "title" }}'>
        <img 
            srcset='
                {{ $img512.Permalink }} {{ $img512.Width }}w,
                {{ $img1024.Permalink }} {{ $img1024.Width }}w,
                {{ $img2048.Permalink }} {{ $img2048.Width }}w'
            sizes="(min-width: 780px) 584px, calc(100vw - 16px)"
            height="{{ $img.Height }}"
            width="{{ $img.Width }}"
            src='{{ $img.Permalink }}'
            alt='{{ .Get "title" }}'
            loading="lazy"/>
    </a>
    <figcaption>(📷: {{ .Get "author" }}) {{ .Get "title" }}</figcaption>
</figure>

Pretty sweet! I’ve even got :figure mapped as a text expansion shortcut so I don’t have to remember the syntax each time! Click through to read about responsively serving images with srcset, or click through to read about my image resizing service, AutoImageResizer, head over here!

Happy developing!

– Finn 👋

Custom Hugo Figure Snippet

References