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

**URL:** <https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262>\
**Category:** support\
**Created:** [April 10, 2024, 8:54pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262 "2024-04-10T20:54:00Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom\_Durand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tom_durand/32/14460_2.png) [@Tom\_Durand](https://discourse.gohugo.io/u/Tom_Durand)\
**Post date:** [April 10, 2024, 8:54pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/1 "2024-04-10T20:54:00Z")

</div>

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

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

```

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

```auto
<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:

```auto
<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 !

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [April 16, 2024, 12:57pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/2 "2024-04-16T12:57:11Z")

</div>

[https://github.com/golang/go/issues/47452](https://github.com/golang/go/issues/47452)

Pass the key/val pair through the safeHTMLAttr function:

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

```

---

<div class="post-metadata">

**Author:** ![Tom\_Durand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tom_durand/32/14460_2.png) [@Tom\_Durand](https://discourse.gohugo.io/u/Tom_Durand)\
**Post date:** [April 16, 2024, 4:45pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/3 "2024-04-16T16:45:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [April 16, 2024, 4:53pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/4 "2024-04-16T16:53:30Z")

</div>

> [@Tom\_Durand](#):
>
> I thought the parameters in the config file

Which ones?

---

<div class="post-metadata">

**Author:** ![Tom\_Durand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tom_durand/32/14460_2.png) [@Tom\_Durand](https://discourse.gohugo.io/u/Tom_Durand)\
**Post date:** [April 16, 2024, 7:59pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/5 "2024-04-16T19:59:52Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [April 16, 2024, 8:08pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/6 "2024-04-16T20:08:17Z")

</div>

> [@Tom\_Durand](#):
>
> What happened in this version ?

Nothing. If something changed it is on your end.

---

<div class="post-metadata">

**Author:** ![Tom\_Durand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tom_durand/32/14460_2.png) [@Tom\_Durand](https://discourse.gohugo.io/u/Tom_Durand)\
**Post date:** [April 17, 2024, 8:21am UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/7 "2024-04-17T08:21:15Z")

</div>

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

```auto
/* $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 ?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [April 17, 2024, 1:53pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/8 "2024-04-17T13:53:11Z")

</div>

> [@Tom\_Durand](#):
>
> and used identically

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`).

---

<div class="post-metadata">

**Author:** ![Tom\_Durand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tom_durand/32/14460_2.png) [@Tom\_Durand](https://discourse.gohugo.io/u/Tom_Durand)\
**Post date:** [April 17, 2024, 7:06pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/9 "2024-04-17T19:06:40Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [April 17, 2024, 7:20pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/10 "2024-04-17T19:20:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tom\_Durand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tom_durand/32/14460_2.png) [@Tom\_Durand](https://discourse.gohugo.io/u/Tom_Durand)\
**Post date:** [April 17, 2024, 7:46pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/11 "2024-04-17T19:46:36Z")

</div>

> [- The Go Programming Language](https://golang.org/src/html/template/content.go) 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” 🤐

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [April 18, 2024, 4:15pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/12 "2024-04-18T16:15:51Z")

</div>

I assume this comment is from you:  
[https://github.com/golang/go/issues/47452#issuecomment-2063852947](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](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](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/a/5/a54dc6321dada30dc7a0e977aa33568746539a3a.png)

---

<div class="post-metadata">

**Author:** ![Tom\_Durand](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tom_durand/32/14460_2.png) [@Tom\_Durand](https://discourse.gohugo.io/u/Tom_Durand)\
**Post date:** [April 18, 2024, 4:58pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/13 "2024-04-18T16:58:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [April 20, 2024, 4:58pm UTC](https://discourse.gohugo.io/t/same-scratch-variable-used-for-im-and-link-preload-tag-but-all-spaces-replaced-by-20-in-the-link-imagesrc-attribute/49262/14 "2024-04-20T16:58:27Z")

</div>

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