Create a custom Hugo image render hook

This is a record of what I did. It’s not necessarily the best approach, or even using the correct terms.

Edit: looking at this again a few days later, what I did is create a custom Hugo render hook. The documentation is here: https://gohugo.io/render-hooks/introduction/ . The use of the layouts/_default/_markup/ directory is now depricated. Render hooks should now be placed in the layouts/_markup directory. Other than directory issue, the instructions below seem to be correct.

In the theme’s layout's directory:

mkdir -p _default/_markup

In the _markup directory (render-image.html):

<figure>
  <img
    src="{{ .Destination | safeURL }}"
    alt="{{ .Text  }}"
    {{
    with
    .Title
    }}title="{{ . }}"
    {{
    end
    }}
  />
  {{ with .Text }}
  <figcaption>{{ . }}</figcaption>
  {{ end }}
</figure>

Now the following markdown:

![Fractal created with Halley's method](/images/fractal_20.png "Fractal image")

gets rendered as:

<figure>
  <img
    src="/images/fractal_20.png"
    alt="Fractal created with Halley’s method"
    title="Fractal image"
  />

  <figcaption>Fractal created with Halley’s method</figcaption>
</figure>

TODO: update all existing images in the blog to use this shortcode.