Help witih an empty set from a (relatively) complex loop

Hi, can you see why the following code produces no error, but an empty set ?

{{range $index, $element := (uniq (slice $25h $50h $100h))}}
{{ $imgset := $imgset | append (printf "url(%s) %dx" $element.RelPermalink (add $index 1) )}}
{{ $imgset }}
{{ end }}

I saw that at each iteration, the slice is seemingly correctly crawled through, but instead of appending and enlarging the string, it is just overwitten with tne next variable !
and after the loop is finished, $imgset becomes empty.
I don’t know the syntax enough…the files are correct, the index grows, the element of $element changes too. I don’t know.
I want to write the code for using the image-set() css function for responsive backgrounds :slight_smile:

You’re declaring/reassigning a local variable in the range block, which won’t affect the one outside of the range block. To fix it, you’ll need to declare it outside and replace := with =.

{{ $imgset := slice }}
{{ range ... }}
  {{ $imgset = $imgset | append ... )}}
{{ end }}
{{ $imgset }}
1 Like

Half-true, because I forgot to include the declaration a line above. But the := was indeed resetting the variable, or maybe creating a new of local scope offsetting the first.

Ok, it’s done when it comes to syntax so the thread is closed… But the browser doesn’t react as it should be. I would be delighted if someone could try this:

background-image: image-set( url(/Images/banners/image-25px-high.webp) 1x, url(/Images/banners/image-50px-highwebp) 2x, url(/Images/banners/image-110px-high.webp) 3x);

Only the picture with the “1x” index only every gets displayed, regardless of the order in the list. Of course I’ll ask on other forums, so feel free to ignore this.

Namely which “the browser”?

According to MDN, the url parameter expects a string which should be enclosed in single or double quotes.

1 Like

both firefox and chromium.
You can see the result in here
There are single quotes (the developper tools erase them, but the code source show them), get the window small enough and thus the header’s height lower than 75px, the file name of the background has “ruin” into it. only the biggest, 110px high, is download, when refreshing without cache.
I tried with double quotes too.

Not in your post :frowning:

Not here, though (FF 120). Select a mobile device in the dev tools (must be portrait, btw, otherwise the header height does not shrink – you should perhaps look at that), reload the page – loads 50px version here.
But you’re right, of course – this discussion doesn’t belong here.

Yeah I added them under your advise.
Ok, thanks for that verification, the mystery deepens :face_with_raised_eyebrow: :face_with_raised_eyebrow:

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