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
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 -}}
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
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.
> 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.
Assumes that markup.goldmark.parser.attribute.title and markup.goldmark.parser.attribute.block are both true in your site configuration. ↩︎
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.
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.
