Can't get around syntax issues with printf/print and safeHTMLAttr

Hi,
I can’t do write what I want because of those security checks with html attributes, which I can’t deactivate. I tried with backsticks, double or triple ", I can’t make it work.
This is the code:

{{safeHTMLAttr (printf `style="
background:url("%q");
background-size:cover;
background-repeat:no-repeat;"`
$thumbnail.RelPermalink)}}>

I think you can easily read what I want to get.
This is the current output:

<img srcset="/Images/spirituality/mythology/freyr_freiya_drawing_hua7f350cae9680fd00478216ab96f7a4d_1316858_200x0_resize_q75_h2_mitchellnetravali_2.webp 200w
,/Images/spirituality/mythology/freyr_freiya_drawing_hua7f350cae9680fd00478216ab96f7a4d_1316858_400x0_resize_q75_h2_mitchellnetravali_2.webp 400w
,/Images/spirituality/mythology/freyr_freiya_drawing_hua7f350cae9680fd00478216ab96f7a4d_1316858_604x0_resize_q75_h2_mitchellnetravali_2.webp 604w
,/Images/spirituality/mythology/freyr_freiya_drawing_hua7f350cae9680fd00478216ab96f7a4d_1316858_1000x0_resize_q75_h2_mitchellnetravali_2.webp 1000w
,/Images/spirituality/mythology/freyr_freiya_drawing_hua7f350cae9680fd00478216ab96f7a4d_1316858_1192x777_resize_q75_h2_mitchellnetravali_2.webp 1192w" src=../../Images/spirituality/mythology/freyr_freiya_drawing_hua7f350cae9680fd00478216ab96f7a4d_1316858_1192x777_resize_q75_h2_mitchellnetravali_2.webp loading=lazy alt="Picture of Freya and Freyr" title="Freyia and Freyr" sizes="(max-width: 960px) 100vw, (max-width: 604px) 50vw, vw" "width=1000 height=652 style=background:url( "/images/spirituality/mythology/freyr_freiya_drawing_hua7f350cae9680fd00478216ab96f7a4d_1316858_1000x0_resize_q5_h2_mitchellnetravali_2.webp""); background-size:cover; background-repeat:no-repeat;">

I have no clue what printf is doing. I find impossible to escape characters the simple way. There should be a way to disable thock safety checks at least locally that probably more than one user don’t need or ever require, to put it politely.

No quotes around the verb.

"%q" -> %q

See fmt package - fmt - Go Packages

I tried your solution before and it doesn’t work. Code:

<img
src="{{ $thumbnail.RelPermalink}}" 
srcset=" {{ $smallest.RelPermalink }} {{$smallest.Width}}w {{ range uniq (slice $very_small $small $medium $large) }}, {{ .RelPermalink }} {{.Width}}w {{end}}" loading="{{with .Attributes.loading}}{{ . }}{{else}}lazy{{end}}" {{if or .Title .Text}}alt="{{ default .Title .Text }}"{{end}} {{ with .Title }}title="{{ .|plainify }}"{{end }} sizes="(max-width: 960px) 100vw, (max-width: 604px) {{if in .Attributes.class "center"}}1OO{{else}}50{{end}}vw, {{if in .Attributes.class "center"}}70{else}}35{{end}}vw"
 {{ safeHTMLAttr (printf `"width="%d" height="%d"` $medium.Width $medium.Height)}}
{{safeHTMLAttr (printf 
`style="background:url(%q);	
background-size:cover;
background-repeat:no-repeat;"`
$thumbnail.RelPermalink)}}>

Result:

<img src=../../Images/article/levi_strauss_1_huf86a05b1ec394239801fbda2a0b2250f_1492618_1000x0_resize_q5_h2_mitchellnetravali_2.webp
srcset="/Images/article/levi_strauss_1_huf86a05b1ec394239801fbda2a0b2250f_1492618_200x0_resize_q75_h2_mitchellnetravali_2.webp 200w , /Images/article/levi_strauss_1_huf86a05b1ec394239801fbda2a0b2250f_1492618_400x0_resize_q75_h2_mitchellnetravali_2.webp 400w , /Images/article/levi_strauss_1_huf86a05b1ec394239801fbda2a0b2250f_1492618_604x0_resize_q75_h2_mitchellnetravali_2.webp 604w , /Images/article/levi_strauss_1_huf86a05b1ec394239801fbda2a0b2250f_1492618_1000x0_resize_q75_h2_mitchellnetravali_2.webp 1000w , /Images/article/levi_strauss_1_huf86a05b1ec394239801fbda2a0b2250f_1492618_1540x0_resize_q75_h2_mitchellnetravali_2.webp 1540w"
loading=lazy
alt="Portrait of Levi Strauss"
sizes="(max-width: 960px) 100vw, (max-width: 604px) 50vw, vw" "width=1000 height=533
style=background:url( /images/article/levi_strauss_1_huf86a05b1ec394239801fbda2a0b2250f_1492618_1000x0_resize_q5_h2_mitchellnetravali_2.webp"); background-size:cover;background-repeat:no-repeat;">

so you see the first $thumbnail.RelPermalink outputs well, but not the second: /images/article/levi_strauss_1_huf86a05b1ec394239801fbda2a0b2250f_1492618_1000x0_resize_q5_h2_mitchellnetravali_2.webp doesn’t exist, but "/Images"etc does. Why does it change the case ?
Then, background:url( /images/article/levi_strauss_1_huf86a05b1ec394239801fbda2a0b2250f_1492618_1000x0_resize_q5_h2_mitchellnetravali_2.webp") is wrong, the content nof url has one ending double-quote but not an opening one. An issue I did see beforen and couldn’t solve.

I think you mean the way you are used to. Go uses quoting rules that produce the correct result, if you follow the rules. ‘Simple’ quoting (by which I presume you mean old school \" and friends can get pretty hairy, pretty quickly, with certain input and output requirements. (Have you ever tried to do something like the above in C?

Anyway, I think you need to rethink your approach. Think of how you would do the above in a traditional compiled language rather than scripting languages like Bash or Perl. Bash and Perl make certain use cases easy, but have warts of their own, which is why new languages were created (not just because of NIH syndrome). This forum isn’t really the place for griping about how languages work or don’t work the way one expects, it’s a place to learn how to achieve what you want with Go templates, because one wants to achieve certain things with Hugo, which bases it’s templates on Go templates.

1 Like

I don’t know about C, I only know Ada/Pascal, regexp, a bit of sed bash and fish. I get it, but I hope I don’ have to learn the whole of Go to just escape double-quotes, do I ? I’ll try and digest fmt package - fmt - Go Packages.

1 Like

Not the whole of Go, but string / quoting syntax would help :wink: (and of course the aforementioned Go package).

Understanding Go string literal syntax might helpful as well as other parts of parsing of The Go Programming Language Specification.

Ultimately though, I think you need to not try to ‘brute-force’ create a string, but to ‘code it’.

1 Like

Ok, given $thumbnail.RelPermalink = “/Images/article/thumbnail.webp”, how would you get the following output:

style=“background:url(”/Images/article/thumbnail.webp"); background-size:cover;background-repeat:no-repeat;"
?

This seems to produce valid code:

{{ safeHTMLAttr (printf `style="background:url(%s); background-size:cover; background-repeat:no-repeat;"` $thumbnail.RelPermalink) }}
1 Like

I assume a backstick before “style” and after ;"
Seems like I’m not the only one struggling with escapement…
It’s not valid:

style=background: url(/images/spirituality/mythology/isis-osiris_hu62ec694a55809b8bde35c4fe5dc12179_1673326_1000x0_resize_q5_h2_mitchellnetravali_2.webp)“; background-size:cover; background-repeat:no-repeat;”

it should be style=", url(" and webp"); instead of wepb)";
I’ll see witih center

Should be "center"}}70{{ which might have been part of your issue.

Splitting this into variables and combing the variables into the final string would, I think, make it easier to detect and solve that kind of syntax error.

Fixed now, was a bit quick when pasting it in and forgot to format correctly for the forum.

2 Likes

?! How is this not producing an error ?

I was quoting a piece of your code, not reproducing the whole thing. You had a single brace { instead of two {{.

Your code is producing this:

style=background:url(/Images/spirituality/mythology/isis-osiris_hu62ec694a55809b8bde35c4fe5dc12179_1673326_1000x0_resize_q5_h2_mitchellnetravali_2.webp); background-size

Adding doublequotes around %s is producing:

style=background:url( /images/spirituality/mythology/isis-osiris_hu62ec694a55809b8bde35c4fe5dc12179_1673326_1000x0_resize_q5_h2_mitchellnetravali_2.webp"); background-size

If even yourself cannot make sense of tihs without bringing a whole school manual, how are supposed to do casual users of hugo, which just want to escape a double-quote ? Any idea why the case changed for Image ?

Whose code? And which code specifically? There are multiple people in this conversation, and multiple bits of code.

My code above produces this:

style="background:url(/images/foo.webp); background-size:cover; background-repeat:no-repeat;"
1 Like

Er, not required and complicates things:

css - Is quoting the value of url() really necessary? - Stack Overflow

ok, one less problem then, though I don’t appreciate that a program rewrites something without being asked to.
for now you code leaves us with:

style=background:url(/Images/spirituality/mythology/isis-osiris_hu62ec694a55809b8bde35c4fe5dc12179_1673326_1000x0_resize_q5_h2_ mitchellnetravali_2.webp);background-size:cover;background-repeat:no-repeat>

No double-quotes between the content of the style attribute.

Instead of:

try (I’m assuming the image you want is in $thumbnail as a resource, based on your code).
I’m also removing the .Attributes references because they won’t work unless you are in a render-image hook.

{{/* Assumes $centeredImage is set to "center" for centered image; where this comes from depends on where this code lives */}}
{{ $backgroundStyle := printf `style="background:url(%s); background-size:cover; background-repeat:no-repeat;"` $thumbnail.RelPermalink }}
{{ $srcSet := printf "%s %dw" $smallest.RelPermalink $smallest.Width
{{ range uniq (slice $very_small $small $medium $large) }}
  {{ $srcSet = $srcSet | append (printf ", %s %dw" .RelPermalink .Width) }}
{{ end }}

<img src="{{ $thumbnail.RelPermalink}}" srcSet="{{ $srcSet }}"
loading="{{with .Page.Param "loading"}}{{ . }}{{else}}lazy{{end}}" {{if or .Title .Text}}alt="{{ default .Title .Text }}"{{end}} {{ with .Title }}title="{{ .|plainify }}"{{end }} sizes="(max-width: 960px) 100vw, (max-width: 604px) {{if eq $centeredImage "center"}}1OO{{else}}50{{end}}vw, {{if eq $centeredImage "center"}}70{{else}}35{{end}}vw"
width="{{ $thumbnail. Width }}" height="{{ $thumbnail. Height }}"
{{safeHTMLAttr $backgroundUrl }}>

Code is untested but should work with at most minor tweaks.

Whose code, which code? Please be specific and don’t ask us to read your mind.