Same scratch variable used for <im> and link preload tag, but all spaces replaced by 20 in the link imagesrc attribute

support
1

Hi,
How can you explain that “$src” in {{ $loading := (dict "url" $img.Permalink "srcset" $src "sizes" $Sizes) }}, when used in the image renderhook produces a correct responsive img tag, but when used for

<link rel="preload" as="image" href="{{ .url }}" imagesrcset="{{.srcset}}" imagesizes="{{.sizes}}">

, changes all spaces into “%20” ? like that:

<link rel="preload" as="image" href="http://localhost:1313/Images/memes/chad_traditional_food_preparing_woman.webp" imagesrcset="http://localhost:1313/Images/memes/chad_traditional_food_preparing_woman_huf4a3b88d4f7fd1d0f818e258fbbd887d_904442_800x0_resize_q95_h2_lanczos_2.webp%20800w,%20http://localhost:1313/Images/memes/chad_traditional_food_preparing_woman_huf4a3b88d4f7fd1d0f818e258fbbd887d_904442_500x0_resize_q95_h2_lanczos_2.webp%20500w,%20http://localhost:1313/Images/memes/chad_traditional_food_preparing_woman_huf4a3b88d4f7fd1d0f818e258fbbd887d_904442_318x0_resize_q95_h2_lanczos_2.webp%20318w,%20http://localhost:1313/Images/memes/chad_traditional_food_preparing_woman_huf4a3b88d4f7fd1d0f818e258fbbd887d_904442_200x0_resize_q95_h2_lanczos_2.webp%20200w" imagesizes="(max-width: 350px) 100vw, (max-width: 600px) 100vw, 70vw">

You can see what’s wrong, when the corresponding img tag (generated with the same $src Scratch or Store variable, is:

<img src="../Images/memes/chad_traditional_food_preparing_woman_huf4a3b88d4f7fd1d0f818e258fbbd887d_904442_800x0_resize_q95_h2_lanczos_2.webp" srcset="http://localhost:1313/Images/memes/chad_traditional_food_preparing_woman_huf4a3b88d4f7fd1d0f818e258fbbd887d_904442_800x0_resize_q95_h2_lanczos_2.webp 800w, http://localhost:1313/Images/memes/chad_traditional_food_preparing_woman_huf4a3b88d4f7fd1d0f818e258fbbd887d_904442_500x0_resize_q95_h2_lanczos_2.webp 500w, http://localhost:1313/Images/memes/chad_traditional_food_preparing_woman_huf4a3b88d4f7fd1d0f818e258fbbd887d_904442_318x0_resize_q95_h2_lanczos_2.webp 318w, http://localhost:1313/Images/memes/chad_traditional_food_preparing_woman_huf4a3b88d4f7fd1d0f818e258fbbd887d_904442_200x0_resize_q95_h2_lanczos_2.webp 200w" loading="eager" fetchpriority="high" alt="Parodic modification of a meme normally praising traditional gender role and cooking, to promote instead innate ape&amp;rsquo;s superior strength acquired with raw food" title="Men on the other hand, are known to lose muscles without constant exercising." sizes="(max-width: 350px) 100vw, (max-width: 600px) 100vw, 70vw" width="800px" height="453px">

Thank you !

2

https://github.com/golang/go/issues/47452

Pass the key/val pair through the safeHTMLAttr function:

  <link rel="preload" as="image" href="{{ .url }}" {{ printf "imagesrcset=%q" .srcset | safeHTMLAttr }} imagesizes="{{.sizes}}">
1 Like
3

Thanks, but God… I thought the parameters in the config file allowed to bypass that kind of security check ? Or is it a stop-gap measure ? I didn’t have that problem before.

4

Which ones?

5

I don’t know… I just wonder what happened. Before I was pleased not having to use this ugly syntax, and now I have to ? What happened in this version ?

6

Nothing. If something changed it is on your end.

1 Like
7

Ok. Then let’s look at my code. This is for img:

/* $small etc are resized from $img */
{{ range uniq (slice $medium $small $very_small $smallest) }}
  {{ $src = $src | append (printf "%s %dw" .Permalink .Width) }}
{{ end }}
{{ $src = delimit $src `, ` }}
{{if in .Attributes.class "center"}}
	{{ $Sizes = "(max-width: 350px) 100vw, (max-width: 600px) 100vw, 70vw"}}
{{ else }}
	{{ $Sizes = "(max-width: 350px) 100vw, (max-width: 600px) 40vw, 400px"}}
{{ end }}
{{ $loading := (dict "url" $img.Permalink "srcset" $src "sizes" $Sizes) }}
<img src="{{ $medium.RelPermalink }}" srcset="{{ $src }}" loading={{if in .Attributes.loading "eager"}}"eager" fetchpriority="high"{{else}}"lazy"{{end}} {{with default .Title .Text }}alt="{{.| htmlUnescape}}"{{end}} {{ with .Title }}title="{{ .|plainify }}"{{end }} sizes="{{$Sizes}}" {{with $medium}}width="{{.Width}}px" height="{{.Height}}px"{{end}}>

$loading.srcset is identical to $src, and used identically, so what do I need the print statement in one case and not the other ?

8

From the above, it looks like you are using the value in two different attributes: srcset and imagesrcset. The Go issue I referenced above is about the imagesrcset attribute (i.e., it behaves differently than srcset).

9

yes, exactly, it behaves differently… why ? They’re both templates, I don’t understand. is it a matter of which template it is in ? html-head.html vs render-image.html, or different attributes (or different attributes of different tags) being treated differently despite having the same exact value ?

10

Did you even read this?
https://github.com/golang/go/issues/47452

11

- The Go Programming Language probably needs a new content type for space delimited URLs.

I did and I see nothing like an explanation… not for a non-developer at least. That sentence is the closest to answer. To me it basically just reads like “yeah it doesn’t work” :zipper_mouth_face:

12

I assume this comment is from you:
https://github.com/golang/go/issues/47452#issuecomment-2063852947

If so, your question is inappropriate for the Go issue queue. Your question belongs here, and you and I have had this conversation before:

https://discourse.gohugo.io/t/cant-get-around-syntax-issues-with-printf-print-and-safehtmlattr/44152/29

Also, if the comment is from you, your GitHub name is both unfortunate and unwise:

image

13

yes, people have no sense of edgy humor. Oh hell.
Thank you so that is what I changed… in the config. I have difficulty keeping track of everything, so things like that happen.

14

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