HUGO

Simple image render hook template for responsive images

Thank you very much for the great Hugo 0.62.0 christmas present!

This simple image render hook template uses the image title as an optional caption.

Feel free to adjust and use, if this template fits your use case.

{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ $small := $image.Resize "480x" }}
{{ $medium := $image.Resize "768x" }}
{{ $big := $image.Resize "1024x" }}
{{ $alt := .PlainText | safeHTML }}
{{ $caption := "" }}
{{ with .Title }}
  {{ $caption = . | safeHTML }}
{{ end }}

<figure>
  <a href="{{ $image.RelPermalink }}">
    <img
      sizes="100vw"
      srcset="{{ $small.RelPermalink }} 480w, {{ $medium.RelPermalink }} 768w, {{ $big.RelPermalink }} 1024w"
      src="{{ $image.RelPermalink }}"
      width="{{ $image.Width }}"
      height="{{ $image.Height }}"
      alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}"
      >
  </a>
  {{ with $caption }}
    <figcaption>{{ . | markdownify }}</figcaption>
  {{ end }}
</figure>

An addition on how to use this template:

Save the code published above to /layouts/_default/_markup/render-image.html as described here.

In your markdown content files use the regular images markdown code in order to render a responsive image:

![Alt should always be set for reasons of inclusion](my-image.jpg "An optional title/caption supporting *markdown*")

As mentioned this template uses the title attribute to produce a caption. Of course, you can (additionally) use it as usual.

12 Likes

This is great, appreciate seeing an example of a render-image.html template but I have my images all in the static directory (/static/images) and I use /images as the path for my images in markdown

![Duncan holding a big bird](/images/yes-that-is-a-big-bird.jpg)

Iā€™m trying to figure out how to get the height/width of this image at build time so that I can add it to my img tag, but no luck so far :frowning:

Any ideas?

Hi!

Glad to hear this.

You can move your images folder e.g. to /content/images/ as described in this post. You can skip step 3 and optionally step 4.

Hope this helps.