"loading" attribute with image renderhooks

support
1

Hi,
I’ve been experimenting with attributes renderhooks and keeping in line with html semantics, and so far and it’s great, however I can’t pass the loading attribute to GROUPS of inline images, while it works on standalone (block) ones.

{{if .IsBlock}}
<figure {{with .Attributes.class}}{{.}}{{end}}">{{ with .Title }}<figcaption>
{{.|$.Page.RenderString}}</figcaption>{{ end }}
<img loading="{{with .Attributes.loading}}{{.}}
{else}}
lazy{{end}}" src="{{ .Destination | safeURL }}.small" {{ with .Title }}title="{{ markdownify . }}"{{ end }}/>
</figure>

{{else}}

<span {{with .Attributes.class}}{{.}}{{end}}">{{ with .Title }}
<figcaption>{{.|$.Page.RenderString}}
</figcaption>{{ end }}
<img loading="{{with .Attributes.loading}}{{.}}{{else}}lazy{{end}}" src="{{ .Destination | safeURL }}.small" {{ with .Title }}title="{{ markdownify . }}"{{ end }}/>
 </span>

 {{end}}

.center is a class to align images in a row with equal width.
The following, for which .IsBlock = true,

![image](https://logos.flamingtext.com/Name-Logos/Dd-design-sketch-name.webp)
{.center loading=eager}

show the correct class and attribute, but the exemple below, for which .IsBlock = false, ignore the attribute while the class and resulting layout is fine.

![image](https://logos.flamingtext.com/Name-Logos/Dd-design-sketch-name.webp) 
![image](https://logos.flamingtext.com/Name-Logos/Dd-design-sketch-name.webp)
{.center loading=eager}

I am surprised the flex layout is still fine, to be honest I don’t understand completely how it works, but hey, it does, to a T.

It produces this html:

<p class=center><span>
<img loading=lazy src=https://logos.flamingtext.com/Name-Logos/Dd-design-sketch-name.webp.small alt=image></span>
<span><img loading=lazy src=https://logos.flamingtext.com/Name-Logos/Dd-design-sketch-name.webp.small alt=image></span>
<figure class="center"><img loading=eager src=https://logos.flamingtext.com/Name-Logos/Dd-design-sketch-name.webp.small alt=image></figure>

And… I don’t get how it is <p> gets the center class (something I didn’t code for), while the img inside get the correct attributes.
It worked so far though.
How about loading ?

thanks for your help

1 Like
2

Attributes are only supported on Markdown blocks (and titles, I’m not sure what to label them). In the Markdown spec, images are always inline, but a recent config flag in Hugo which 1) Removes surrounding paragraphs and 2) Moves attributes from the P block to the image you can now have attributes on standalone (block level) images.

I can add to this that we have a new .Ordinal attribute on the context we pass to the image render hooks, so you could maybe use that to determine whether to add the eager loading or not (only eager load e.g. the first image?).

1 Like
3

I already have this in my config:

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

So, to sum it up, if I write {.center attribute=value} in the line below a picture that is not standalone, the attribute won’t work but the class will be dispatched to the surrounding paragraph ?

I wish to make my solution works, because .Ordinal is reset when images are inside shortcodes. with <figcaption>{{ .Ordinal }}</figcaption> in the image renderhook, the following

![image](https://logos.flamingtext.com/Name-Logos/Dd-design-sketch-name.webp) 
![image](https://logos.flamingtext.com/Name-Logos/Dd-design-sketch-name.webp) 

{{% center %}}
![image](https://logos.flamingtext.com/Name-Logos/Dd-design-sketch-name.webp) 
{{% /center %}}

{{< center >}}
![image](https://logos.flamingtext.com/Name-Logos/Dd-design-sketch-name.webp) 
{{< /center >}}

shows the numbering 0 0 0 and 1. Inlining doesn’t change that. Granted, I nearly always use markdown attributes now to apply styling, but sometimes I need shortcodes. So your solution would produce… in fact only a few excess loading=eager. But I’m a perfectionist :wink:

4

No, inline images will not receive any attributes.