New markdown attribute and render hooks

Hi,
there’s precious little information.
I have a .center class, and adding

{.center}

at the end of a picture works.

Only if I remove my custom render-hook. How is the {.class} attribute processed, how does it interact with render hooks ?
Why can’t access it, it seems like the default hooks are wrong.
Also while we need to write;

block = true
title = true

it applies neither to blocks (except “naked” images) or titles…
I don’t understand what’s so complicated in applying whatever class simply to “the last closed div element”.
Until now I’ve been using

<div class="center">
  {{ .Inner | .Page.RenderString }}
</div>

as a shortcode. I don’t see why the attribute couldn’t just do exactly the same, it should ignore the hook.

For render hooks it comes in with the attribute map

Can look like this

{{ $class   := .Attributes.class | default "default-image-class"    }}

<div class="{{ $class }}">

it doesn’t work here:

drm@dr-80qr ~> Error: add site dependencies: load resources: loading templates: “/home/drm/WEBSITE/themes/hugo-book/layouts/_default/_markup/render-image.html:28:1”: parse failed: template: _default/_markup/render-image.html:28: undefined variable “$class”

must see more to help :frowning:

can you create a sample repo? or have a open repo?

Okay, you’ve seen my .center class.
here’s the center shortcode:

Error: Error building site: “/home/drm/WEBSITE/content/docs/presentation_instincto_en.md:95: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: template: shortcodes/center.html:2:19: executing “shortcodes/center.html” at <.Page.RenderString>: error calling RenderString: “/home/drm/WEBSITE/content/docs/presentation_instincto_en.md:1:1”: “/home/drm/WEBSITE/themes/hugo-book/layouts/_default/_markup/render-image.html:25:29”: execute of template failed: template: _default/_markup/render-image.html:25:29: executing “portable-image” at <.Attributes.class>: can’t evaluate field Attributes in type goldmark.linkContext
Built in 1957 ms

render-image.html

{{- if .Page.Site.Params.BookPortableLinks -}}
  {{- template "portable-image" . -}}
{{- else -}}

<figure class="{{ .Attributes.class | default "default-image-class" }}">
   <figcaption><p>{{ with .Title }} {{ . | markdownify }} {{ end }}
   </p></figcaption>
<a href="{{ .Destination | safeURL }}">
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }}title="{{ . }}"{{ end }}/> </a>
</figure>
  {{- end -}}

{{- define "portable-image" -}}
  {{- $isRemote := or (in .Destination "://") (strings.HasPrefix .Destination "//") }}
  {{- if not $isRemote }}
    {{- $path := print .Page.File.Dir .Destination }}
    {{- if strings.HasPrefix .Destination "/" }}
      {{- $path = print "/static" .Destination }}
    {{- end }}
    {{- if not (fileExists $path) }}
      {{- warnf "Image '%s' not found in '%s'" .Destination .Page.File }}
    {{- end }}
  {{- end }}

<figure class="{{ .Attributes.class | default "default-image-class" }}">
   <figcaption>
<p>{{ with .Title }} {{ . | markdownify }} {{ end }}
   </p></figcaption>
<a href="{{ .Destination | safeURL }}">
  <img src="{{ .Destination | safeURL }}"
alt="{{ .Text }}" {{ with .Title }}title="{{ . }}"{{ end }}/> </a>
</figure>
{{- end -}}

IMHO define changes the local reference of . (the dot).

1st try: use $.Attibutes (don’t know if it works with define )

2nd try:
put {{ $class := .Attributes.class | default "default-image-class" }}

in the first line and use

<figure class={{ $class }}>

Nope !

when I do that (defining class in the first line before all the weird {{{if}}} and {{{else}}}
it says:

[515]> hugo server
Error: add site dependencies: load resources: loading templates: “/home/drm/WEBSITE/themes/hugo-book/layouts/_default/_markup/render-image.html:31:1”: parse failed: template: _default/_markup/render-image.html:31: undefined variable “$class”

Otherwise if I define it just above each figure element, it says:

Error: Error building site: “/home/drm/WEBSITE/content/docs/Autres_cachés/spirituality_en.md:1:1”: “/home/drm/WEBSITE/themes/hugo-book/layouts/_default/_markup/render-image.html:30:24”: execute of template failed: template: _default/_markup/render-image.html:30:24: executing “portable-image” at <.Attributes.class>: can’t evaluate field Attributes in type goldmark.linkContext
Built in 1261 ms

Sorry for the this, I could NOT get it working in my samples.
.Attributes.class does not exist for all render hooks.
Copied it from render-codeblock template :frowning:

Can anybody from the developers ( @bep ?) check this?
Can be a config problem for the goldmark renderer???

Markdown attributes may be used with most block-level elements, but not with inline elements. Images and anchors (links) are inline elements.

attribute

Enable custom attribute support for titles and blocks (emphasis mine) by adding attribute lists inside single curly brackets…

With Hugo in its default configuration, these are the block-level HTML elements that may be represented with markdown. Note that markdown attributes cannot be used with dd, dt, or li elements.

Element Description Accepts markdown attributes[1]
blockquote Block quotation :white_check_mark:
dd Describes a term in a description list :x:
dl Description list :white_check_mark:
dt Description list term :x:
h1 - h6 Heading :white_check_mark:
hr Horizontal rule :white_check_mark:
li List item :x:
ol Ordered list :white_check_mark:
p Paragraph :white_check_mark:
pre Preformatted text[2] :white_check_mark:
table Table :white_check_mark:
ul Unordered list :white_check_mark:
Examples
> Able was I ere I saw Elba.
{.foo}

Able
: Having the power, skill, means, or opportunity to do something.
Elba
: A Mediterranean island in Tuscany, Italy.
{.foo}

## Heading Level 2 {.foo}

---
{.foo}

1. Ordered list item 1
1. Ordered list item 2
{.foo}

This is a paragraph.
{.foo}

```text {.foo}
A fenced code block
```

Name|Type
:--|:--
Felix|Cat
Spot|Dog
{.foo}

- Unordered list item 1
- Unordered list item 2
{.foo}

Also note that using an image render hook to produce a figure element will result in invalid HTML. You cannot place a figure element within a p element. See this discussion.


  1. Assumes that markup.goldmark.parser.attribute.title and markup.goldmark.parser.attribute.block are both true in your site configuration. ↩︎

  2. Fenced code block ↩︎

4 Likes

Well that is an exhaustive explanation, if disappointing !
Then I’ll stop trying.
The fact elements are divided between “block” and “inline” doesn’t fare well with me, since I use the “flex” and grid display a lot.
Also, in my hook the paragraph is inside the figcaption tag, not the other way around, so what do you mean by that You cannot place a figure within a p element ? Is it something I can change or not ? And until now it worked pretty well ! There is no other way to get nice captions !

Look at the HTML generated by this markdown. In both cases the image (or whatever the image render hook produces) is wrapped within a p element. That is how markdown is rendered to HTML per the CommonMark specification.

So if your image render hook produces a figure element, it will be wrapped within a p element, which is invalid HTML.

If you run the rendered page through an HTML validator, it will fail.

This is not true. Use the embedded figure shortcode, or create your own, or simulate a figure element using span elements. More info in this topic.

the question is : why is commonmark emitting code not in line with HTML semantics ?
figure is captions, period. Commonmark is wrong and I am not adopting very awkward habits while the natural solution does work and display fine.

It is not. It behaves as specified. When your render_hook runs, the MD processor is no longer in the picture, so to speak.

Yes, I understand. what makes little sense, is “figure” not being treated the same as img, while it’s supposed to refer to the same object, floating or not, with or without a caption.

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