Best way to add a space in a URL for use in srcset

support
1

I’m trying to figure out how I can explicitly include a space between the file location url and width size to be used in an image srcset.

In my toml I have

---
srcset: /images/mockups/apple-watch-white-mockup.png 300px, /images/mockups/apple-watch-white-mockup@2x.png 600px

Which is then called by my partial

<img src="{{.src}}" {{if .srcset}}srcset="{{.srcset }}"{{end}} alt="{{.alt}}" {{if .height}}height="{{.height}}"{{end}}{{if .width}}height="{{.width}}"{{end}}>

And outputs

<img src="./images/mockups/apple-watch-white-mockup.png" srcset="/images/mockups/apple-watch-white-mockup.png%20320px,%20/images/mockups/apple-watch-white-mockup@2x.png%20600px" alt="Wearable device mockup." class="loading" data-was-processed="true">

I checked out the following related topics and tried the urlize, safeURL, HTML and markdownify function, but havent had any luck solving my problem.

In summary, I’d either like to have a srcset string parameter or maybe something that can be used as a range like…

 ---
 # FIRST CHOICE
 srcset: /images/mockups/apple-watch-white-mockup.png 300px, /images/mockups/apple-watch-white-mockup@2x.png 600px

 # SECOND CHOICE
 srcset:
    - 300: /images/mockups/apple-watch-white-mockup.png
    - 600: /images/mockups/apple-watch-white-mockup@2x.png

Whichever one is easier or possible.

Thanks!

2

Do you have a site repo or demo repo up somewhere? I’d check it out, but I don’t want to build a demo. :slight_smile:

You examples are YAML. :point_left: :wink:

3

I built a repo for this: https://github.com/randallmlough/hugo-srcset-help

Note: I use a _index.md file which holds the YAML data (:sweat_smile:)

Thanks!

4

There is a quirk in Go templates that doesn’t make total sense to those of us new to them (and I am very new!), but as @moorereason pointed out, this is a question that gets asked a lot.

@Randy_Lough, here is the modified img.html from your demo repo:

{{ $srcset := .srcset }}
<img class="img-fluid" src="{{.src}}" {{ with .srcset }}{{ printf "srcset=\"%s\"" $srcset | safeHTMLAttr }}{{ end }} alt="{{.alt}}">

There are a lot of moving parts and caveats for why that looks like that, and honestly, I don’t quite recall where I read them all. Eventually we’ll need to explain this better, but for your demo, that outputs:

<img class="img-fluid" src="/images/apple-watch-white-mockup.png" srcset="/images/apple-watch-white-mockup.png 320px, /images/apple-watch-white-mockup@2x.png 600px" alt="A wearable device">

Cameron, the reason I mentioned you is to ask if you could double-check that. I understand what I am doing there, but am not confident enough to call it a day for someone else. :slight_smile:

3 Likes
5

Yes, a use case of safeHTMLAttr came up very recently.

1 Like
6

You’re the man, It’s working beautifully! Thank you.

7

Well, I am certainly a person. Glad it works for you.

1 Like
8

If you wanted to do this using the second option, as in you were ranging through an array of srcset paths. how would you format that? Can’t seem to figure out where to open the srcset quote.

10

Please create a new topic with your question. You can reference this one, but you ought to provide the example front matter in the new topic. :slight_smile: