Goldmark attributes for images, and markdown render hooks

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

Config.toml has the following settings:

      autoHeadingID = true
      autoHeadingIDType = "github"
      withAttribute = true
        image = true

And my markdown is this:


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?

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


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:

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


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.

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