Footnotes inside a <figcaption> using render-image

support
1

Hey there, new user here. I’m trying to add footnote references to image captions, in order to properly source them. After looking online a bunch I ended with this shortcode:

{{ $image := $.Page.Resources.GetMatch (.Get "src")}}
{{ $smallImage := $image.Resize "320x"}}

<figure class="figure-image">
    <a href="{{ $image.RelPermalink }}">
  		<img src="{{$smallImage.RelPermalink }}"
   		{{- if .Get "alt" }}
   		alt="{{ with .Get "alt" }}{{ . }}{{ end }}"
   		{{- end -}}
  		/><!-- Closing img tag -->
   </a>
  <figcaption>
    {{ .Inner }}
  </figcaption>
</figure>

This works, but it necessitates enabling unsafe=true in [markup.goldmark.renderer], which seems like bad practice for something seemingly so simple. Also, if possible, I’d like to have footnotes work whilst using the typical markdown image code – i.e. – and changing render-image.html, but I didn’t manage to make this work (or even using the figure shortcode that comes bundled with Hugo). Is there another way to make this work that I’m missing? Using Markdownify doesn’t seem to make footnotes work, maybe because it doesn’t have access to the rest of the document? Any help would be more than welcome.

2

I’m not quite understanding where there’s a “footnote” in all this. As to unsafe=true: as long as only you modify produce content for this site, I wouldn’t worry about it.

It might help if you

  • provided a link to your repository (as is regularly suggested here), or
  • at least, show an example of how you’re calling this shortcut and explain what exactly you want to achieve.

Also,

does not explain anything. Nobody but you can possibly know what you did or didn’t do and what the results were or were not.

3

You mention footnotes, but you post example code for a figure element instead, without any Markdown for a footnote!

Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.
1 Like