Goldmark attributes for images, and markdown render hooks

[brunoamaral]

I am trying to add a class to images using the standard method for goldmark. Configure Markup | Hugo

Config.toml has the following settings:

    [markup.goldmark.parser]
      autoHeadingID = true
      autoHeadingIDType = "github"
      withAttribute = true
      [markup.goldmark.parser.attribute]
        image = true

And my markdown is this:

![](assets/IMG_2430.jpg)
{.img-fluid}

The output however places img-fluid in the paragraph.

<p class="img-fluid"><img src="assets/IMG_2430.jpg" alt=""></p>

My first guess was to try changing to block = false, then I tried to create a render hook.

Even after reading some threads here I can’t figure out what I am doing wrong, or how to access the Attributes with the render hook. Can someone please point me in the right direction?

[jmooring]

Support for attributes is limited to headings and block elements (including code blocks). Images and links are inline elements.

https://gohugo.io/getting-started/configuration-markup#goldmark

attribute

Enable custom attribute support for titles and blocks by adding attribute lists inside single curly brackets ( {.myclass class="class1 class2" } ) and placing it after the Markdown element it decorates , on the same line for titles and on a new line directly below for blocks.

I’m not sure where you saw this, but it doesn’t do anything:

[markup.goldmark.parser.attribute]
image = true

Common approaches:

• Create a shortcode
• Use an image render hook and pass the params as a destination query string
• Use an image render hook and pass the params in the image title attribute

Related:
https://discourse.gohugo.io/t/is-it-possible-to-use-attribute-lists-with-render-hooks/31374

[brunoamaral]

Thank you, I get it now.

In my understanding, an image is a block and not something inline with a paragraph or list. That was I interpreted the documentation as if it were possible to add classes to images.