How to do wrap <img> with <a> inside <figure> with `render-image.html`

support
4

site configuration

[markup.goldmark.parser]
wrapStandAloneImageWithinParagraph = false # default is true

[markup.goldmark.parser.attribute]
title = true # default is true; applies to h1-h6 elements
block = true # default is false; applies to other block-level elements

markdown

![alt](https://gohugo.io/img/hugo-logo.png)
{link="https://gohugo.io" caption="This is the caption"}

layouts/_default/_markup/render-image.html (something like…)

{{ if .IsBlock }}
  <figure>
    {{ with .Attributes.link }}<a href="{{ . }}">{{ end }}
    <img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}">
    {{ if .Attributes.link }}</a>{{ end }}
    {{ with .Attributes.caption }}
      <figcaption>{{ . }}</figcaption>
    {{ end }}
  </figure>
{{ else }}
  <img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}">
{{ end }}
1 Like