How to use a whitespace character as the last optional delimiter

[ricardoom]

How do I use white space as the optional last delimiter in a delimit function?

Where:
{{- $src := delimit ( slice $cdnURL ( index $transforms 0 ) $id $cdnFolder $imageName ( index $fileExtension 0 ) ( index $wFlag 0 ) ) "" " " -}}

I’m flattening the slice but the last variable needs to have a space character in before it so it should output something like:

https://my.cdn.com/t_320/3456789/folder/image.jpg 320w
Instead I get %20 placed between
https://my.cdn.com/t_320/v1601912469/folder/image.jpg%20320w

[davidsneighbour]

The cat is alive and dead at the same time.

Please create a small demo repo. There is nothing that connects the code lines on top to the https://my.cdn.com part. At least give a proper full example of what goes in and what comes out. %20 is ALWAYS a sign that there is some encoding going on.

long story short:

• what is $cdnURL?
• what is $transforms?
• what is $id?
• what is $cdnFolder?
• what is $imageName?
• what is $fileExtension?
• what is $wFlag?

I know it sounds theatrical, but from your question we can not understand the issue at hand. And I am pretty sure the issue is created at some other point in your code… See any safeHTML or safeURL around there? That might create the %20 for a space.

It’s a black box and if you ask me the cat is always dead. (Schroedinger reference, just in case, and I am a dog guy, so the cat HAS to be dead.)

[ricardoom]

Sorry about the lack of context and unfortunately I cannot, at this time, spin up a demo. That said, the larger story is as follows. I am building a shortcode so images can be easily referenced from the CDN (in this case cloudinary) and added to a post’s markdown without having worry about correctly copying big long urls. And be completely responsive. The shortcode is as follows:

{{< image
  fileID="1234567"
  imagename="ewrin"
  alt="an image of a happy cat in an open, her state is known..."
  caption="Erwin playing in a box"
  >}}

This is all really just an elaborate (and probably over engineered) way to construct a few URLs and feed them to my responsive image markup. In my image.html file I have the following (with actual code this time ):

{{ $placeHolder := $.Page.Site.Params.placeHolderSVG }}

{{- $cdnURL := "https://res.cloudinary.com/useraccoutnname/image/upload/" -}}

{{/* preset image transforms */}}
{{- $320 := "t_320/" -}}
{{- $480 := "t_480_x1/" -}}
{{- $640 := "t_640_x1/" -}}
{{- $960 := "t_960_x1/" -}}
{{- $transforms := ( slice $320 $480 $640 $960 ) -}}

{{/* image dimensions */}}
{{- $w := ( slice "320w" "480w" "640w" "960w" ) -}}

{{/* CDN id added to short code by user */}}
{{- $id := .Get "fileID" -}}

{{/* CDN project folder */}}
{{- $cdnFolder := "/thefolder/" -}}

{{- $imageName := .Get "imagename" -}}

{{- $fileExtension := ( slice ".jpg" ".webp" ".png" ) -}}

{{/*  Source Variables  */}}
{{- $src := delimit ( slice $cdnURL ( index $transforms 0 ) $id $cdnFolder $imageName ( index $fileExtension 0 ) ) "" -}}

{{- $srcsetSmall := delimit ( slice $cdnURL ( index $transforms 0 ) $id $cdnFolder $imageName ( index $fileExtension 1 ) ) "" -}}

{{- $srcsetMedium := delimit ( slice $cdnURL ( index $transforms 1 ) $id $cdnFolder $imageName ( index $fileExtension 1 ) ) "" -}}

{{- $srcsetLarge := delimit ( slice $cdnURL ( index $transforms 2 ) $id $cdnFolder $imageName ( index $fileExtension 1 ) ) "" -}}

<figure>
  <img width="{{ $width }}"
       loading="lazy"
       class="lazy"
       data-src="{{ $src }}"
       data-srcset="{{ $srcsetSmall }} {{ ( index $w 0) }}, {{ $srcsetMedium }} {{ ( index $w 1 ) }}, {{ $srcsetLarge }} {{ ( index $w 2) }} "
       srcset="{{ $placeHolder }}"
       src="{{ $placeHolder }}"
       alt="{{ .Get "alt" }}"
       sizes="{{ $small }}, {{ $medium }}, {{ $large}}" />
  {{ with .Get "caption" }}
  <figcaption>{{ . }}</figcaption>
  {{ end }}
</figure>

This is all unwieldy and convoluted as it is, so I didnt what to have to add that extra ( index $w 0 ) on at the end of each of $srcset variables.

data-srcset="{{ $srcsetSmall }} {{ ( index $w 0) }}, {{ $srcsetMedium }} {{ ( index $w 1 ) }}, {{ $srcsetLarge }} {{ ( index $w 2 ) }} "

To avoid this, I wanted to continue leveraging the delimit function w/ the optionallastdelimiter to bolt on the last part ({{ ( index $w 0 ) }}) into the assembled variable $srcsetSmall et al, like so:

{{- $srcsetSmall := delimit ( slice $cdnURL ( index $transforms 0 ) $id $cdnFolder $imageName ( index $fileExtension 1 ) ( index $w 2 ) ) "" " " -}}

This the was part where I was getting the %20. In the end the goal of the above is to have {{ $srcsetSmall }} etc, return:

https://res.cloudinary.com/useraccoutnname/image/upload/t_320/1234567/thefolder/ewrin.webp 320w

Which at the time of me writing the initial post did not work. A couple stabs w/ different escaped characters and a regex (nothing worked) I took to this forum. Then after rewriting some of the code for this response and double checking to make sure everything was consistent, and re-writing my code for “clarity sake” and then re-running my code, lo and behold this works!

{{- $srcsetSmall := delimit ( slice $cdnURL ( index $transforms 0 ) $id $cdnFolder $imageName ( index $fileExtension 1 ) ( index $w 0) ) "" " " -}}

So, after all of this, some time (hopefully mostly mine) wasted but lessons learned nonetheless… and that lesson is sometimes you just need to rewrite the whole thing so someone else can read it, and you find the problem wasn’t really there to begin with… Sometimes its about the journey and not the destination…

Galling I know. But thanks for traveling with me.