Trying to inline an image, but it gets wrapped in a figure

Update: I see now that the culprit is …/layouts/_markup/render-image.html in a theme I am using. And I suppose that then the response will be to ask about this on the HugoBlox discord server. But even so, if anyone has suggestion or advice here, I would appreciate that.

In my markdown source, I have something like.

Sections marked with the ![dangerous bend symbol](/images/dangerous-bend.svg)
are not intended for you and might just muddy the waters.

I want to image to be inline, as I would expect with typical markdown to HTML processing, but it is getting wrapped in a figure,

ections marked with the
<figure>
    <div class="d-flex justify-content-center">
       <div class=w-100>
          <img src=/images/dangerous-bend.svg
               alt="dangerous bend symbol"
               loading=lazy data-zoomable>
        </div>
    </div>
</figure>
are not intended for you and might just muddy the waters.</p>

which is what I would expect if I had used the `figure` shortcode, but I did not want want a figure here.

Note I am using the HugoBlox Academic CV theme. But I would like help in understanding what I should look for in what is triggering the use of the figure template and I can avoid that trigger. Alternatively, if there is some other, recommended way, to inline an image in the text.

I have looked at other related discussions, but I have found the answers unhelpful. To whatever extent this is a markdown and CSS issue, it is Hugo that has decided to treat that as a figure.

Your theme must be using an image render hook to insert the figure etc. tags. Plain markdown generates plain img tags.

the docs give hints for that. compare your hook with that ones regarding.

  • whutespace removal
  • isBlock

I would use Hugo’s embedded render hooks for links an images. In your site config:

[markup.goldmark.renderHooks.link]
useEmbedded = 'always'

[markup.goldmark.renderHooks.image]
useEmbedded = 'always'

This requires v0.148.0 or later.

See https://gohugo.io/configuration/markup/#renderhooksimageuseembedded.

1 Like

Thank you. I will have to see whether other things in the theme depend on its render hook, but it seems unlikely that any template would construct markdown image syntax.

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