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

support
1

Coming from GitHub #11123, you can find detailed descriptions and examples there.

Long story short:

After @jmooring pointed out that the strange behavior is not Hugo’s bug. I found that the proper way to use the <figure> tag with an image would be something like this (ref):

<figure>
  <a href="https://creativecommons.org/licenses/by-nc/4.0/">
    <img src="https://licensebuttons.net/l/by-nc/4.0/88x31.png" alt="CC BY-NC 4.0 License">
  </a>
</figure>

The order should be <figure>, <a>, <img>.

Of course, I can achieve this by writing a custom shortcode, but I would very much like to keep my post markdown in their original format, for instance:

[![CC BY-NC 4.0 License](https://licensebuttons.net/l/by-nc/4.0/88x31.png)](https://creativecommons.org/licenses/by-nc/4.0/)

Ideally, this should have been achieved by tweaking the render-image.html hook, but maybe I’m too tired to come up with the right way. Any thoughts?

Here's what I have so far

For now, I don’t have render-link.html and have a render-image.html like this:

<figure>
  <img src="{{ .Destination }}" alt="{{ .Text }}" />
</figure>

Which yields:

<p>
  <a href="https://creativecommons.org/licenses/by-nc/4.0/">
    <figure>
      <img
        src="https://licensebuttons.net/l/by-nc/4.0/88x31.png"
        alt="CC BY-NC 4.0 License"
      />
    </figure>
  </a>
</p>

which results in a wrong order: <a>, <figure>, <img>.

What’s worse is that the browser translates this to:

<p>
  <a href="https://creativecommons.org/licenses/by-nc/4.0/">
  </a>
</p>
<figure>
  <a href="https://creativecommons.org/licenses/by-nc/4.0/">
    <img src="https://licensebuttons.net/l/by-nc/4.0/88x31.png" alt="CC BY-NC 4.0 License">
  </a>
</figure>
<p></p>

I’m clueless.

2

The best I can come up with is something like:

![alt](src)
{link="https://example.org"}

If that markdown is acceptable, let me know.

If not, you will need to use a shortcode, either the built-in figure shortcode, or roll your own.

3

@jmooring How would that work in Hugo? The syntax you provided doesn’t seem to work out of the box.

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
5

Thanks! that works like a charm. :+1:t2:

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.