Using render-image hook to generate figures

support
1

I would like to use the render-image hook to generate figures following that idea: Caption images with markdown render hooks in Hugo — Sebastian De Deyne

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

But the images ![description](/path/file.png "The caption") generate html inside <p>, to it generate invalid html (p only accepts “Phrasing elements”, and figures are not: Common content models - HTML5)

One workaround is to add </p> in the beginning of render-image.html and <p> at its end, but it is both ugly and with another flaw: it doesn’t work when it’s an image inside a link:

[![ISRG Certificate Hierarchy Diagram, as of December 2020](/images/isrg-hierarchy.png)](/images/isrg-hierarchy.png)

Any thoughts?

2

This has been discussed before:
https://github.com/gohugoio/hugo/issues/6748#issuecomment-821910875

If you want a <figure> in your content, use a shortcode.

3

Thank you