Admins of this website are creating blog posts and uploading images with spaces in the filenames, and have been doing so for quite some time (100+ posts).

I need to output the URL of said images with the filename URL encoded, but the urlencode variable modifier applies to the entire URL, not just the filename. My template looks like this:

<header {{ if upload }} style="background-image: url({{ upload }});" {{ endif }}>

I need the output to simply have the spaces replaced with the + character, like so: url(/assets/img/blog/how-to-start-a-startup-blog+Week+7.jpg)

Currently, it outputs the URL with spaces, which is invalid CSS and doesn't render properly. Example: url(/assets/img/blog/how-to-start-a-startup-blog Week 7.jpg)

If I use the urlencode variable modifier, I get something like this: %7B%7B+_site_root+%7D%7Dassets%2Fimg%2Fblog%2Fhow-to-start-a-startup-blog+Week+7.jpg (note that even the {{_site_root}} variable is being affected).

Any ideas? This seems simple enough, but I recently inherited a website built with Statamic and can't seem to figure this out.

Thanks!

Answered by Jason Varga! Go to answer.