How to wrap an image in a figure with v0.108.0 and later

[Mehdi_Saada]

@jmooring

and/or wrap an image within a figure element while generating syntactically correct HTML.

Could you explain that in detail better ? How could custom classes add html elements ?
I use renderhooks for now to that effect and have been told it would not create correct html.

[jmooring]

Please read the release notes:
https://github.com/gohugoio/hugo/releases/tag/v0.108.0

If your existing render hook wraps an image in a figure element, you are creating syntactically incorrect HTML. If you view source or use a validator, you will find the figure element is wrapped within a p element. That’s not allowed.

This enhancement allows you to (a) strip the surrounding p tags from a stand-alone image, and (b) use the .IsBlock method within the render hook to determine what the hook is receiving.

With an image in the middle of a paragraph (.IsBlock = false) you would generate an img or picture element.

With a stand-alone image (.IsBlock = true) you might want to wrap the img within a figure element.

Bonus: if all of the images on a page are stand-alone, and you want all of them to be figure elements, you can auto-number them using the .Ordinal method within the render hook.

[Mehdi_Saada]

This is excellent !
And I will nickname you the hugo God.
I’ll have the deep satisfaction… of generating correct html , eventhough I’ve never seen any difference
As I understand, the rendering block understands and knows the attributes applied to the element (they are available withhin its scope and the class isn’t automatically applied), right?

[jmooring]

@Mehdi_Saada

And I will nickname you the hugo God.

Please don’t.

[Mehdi_Saada]

I have an issue though:

“/home/drm/WEBSITE/content/docs/Past_and_future_of_Europeans/for_germany_en.md:17:1”: failed to render shortcode “center”: failed to process shortcode: “/home/drm/WEBSITE/themes/hugo-book/layouts/shortcodes/center.html:2:19”: execute of template failed at <.Page.RenderString>: error calling RenderString: “/home/drm/WEBSITE/content/docs/Past_and_future_of_Europeans/for_germany_en.md:1:1”: “/home/drm/WEBSITE/themes/hugo-book/layouts/_default/_markup/render-image.html:34:5”: execute of template failed at <.IsBlock>: can’t evaluate field IsBlock in type goldmark.linkContext

While my config includes:

[markup]
[markup.goldmark.parser]
wrapStandAloneImageWithinParagraph = false
[markup.goldmark.parser.attribute]
block = true
title = true

I just use {{if .IsBlock}} … {{else}} … {{end}}
As part of my layout I wrap contents within flex containers sometimes, is it an issue ? Now I don’t know what is or isn’t, and if flex/grid/table/inline-flex/others are considered inline or block by the method.

[jmooring]

So the release notes are for version 0.108.0.

That means the feature is available for version 0.108.0 and later.

[Mehdi_Saada]

Okay, I completely screwed over my layout trying to get to that “correctness”.
I need a container to fit figcaption and img when inside paragraphs.
Would <span display:inline-flex><span> be correct ?

[nternetinspired]

I learned something new today @jmooring thank you, now I’m off to fix this!