Is it possible to use attribute lists with render hooks?

support
#1

Let’s take headings for instance.

## A Heading {.text-serif #a-head title=“Look”}

This would make a heading with attributes class text-serif, id a-head and title Look.

Is it possible to include these in the heading render hooks?

Goldmark attributes for images, and markdown render hooks
#2

you’ll have to check on how this interfaces with render hooks

#3

Currently no (I don’t think so), but it’s a great idea.

Could you create an issue on GitHub about it?

As I see this should not be hard to do, but we need to expand the render hook API to pass down the .Attributes.

#4

Done

1 Like
#5

Just a quick follow-up, I’d like to do the same thing with render hooks for images, and it looks like it should be possible, but I’m kinda bunging the syntax.

Could someone check me on if this is possible?

In the markdown:

![alt_text](VulnerabilitytoClimate.png "image_tooltip")
{.image-left}text comes here

In render-image.html:

{{ $attrs = .Attributes }}
<img {{ if isset "class" $attrs }}class="$attrs.class"{{ end }} src=....

I’m currently getting an error on $attrs = .Attributes saying .Attributes doesn’t exist, so clearly I’m not accessing it, when it probably should be an empty map even if I screwed up the syntax for the image?

execute of template failed: template: _default/_markup/render-image.html:5:16: executing “_default/_markup/render-image.html” at <.Attributes>: can’t evaluate field Attributes in type goldmark.linkContext

No special Goldmark extensions enabled in config.toml

#6

It is not. Attributes can only be specified for block elements. Comparing the three render hooks:

Render Hook Element Type Attribute Support
render-link.html <a> inline No
render-image.html <img> inline No
render-heading.html <h1-6> block Yes

See comments:
https://github.com/gohugoio/hugo/pull/8271

Example of Attributes Render Hook in v0.82.0
#7

The attributes would apply to the paragraph since images are wrapped in them, so you’ll need to have something like .attribute img {} in CSS.

Another way would be to add the attributes in the resource params.

#8

@jmooring is right, and that is unfortunate.

See Transfer paragraph attributes to image when used as a block · Issue #8362 · gohugoio/hugo · GitHub

#9

I know others have done similar things. I have some stupid, fragile render hook code that allows you to misuse the image title attribute.

This markdown:

![Alternate text](a.jpg "Title text {id='foo' class='bar'}")

![](a.jpg "{style='border: 1px solid #ff0000'}")

Produces this HTML:

<p><img src="a.jpg" class="bar" id="foo" alt="Alternate text" title="Title text"></p>
<p><img src="a.jpg" style="border: 1px solid #ff0000"></p>

I can post if you’re interested.

2 Likes
#10

Just realized that i did, too. but haven’t been using it.

#11

Thanks folks, that’s unfortunately but misusing title is a cute idea (if horribly nonstandard). Thanks for the snippet Henry!

#12

There is a lot of discussion on this here (see below). Of course, there doesn’t seem to be any consensus.

#13

I think the Markdown attribute situation in Hugo is decent. It’s unfortunate that CommonMark cannot make up its mind, but it gets a little stupid to wait 20 years for them.

3 Likes