XF 2.0 URL's not working in custom string properties

[Russ]

I'll try to keep this as short as possible... in XF1 we let users define multiple images for our custom backstretch option:

"styles/mystyle/headerbg.png", "styles/mystyle/headerbg2.png", "styles/mystyle/headerbg3.png"

This worked fine in XF1 while browsing any page, however in XF2 with friendly URL's on and you're in say the RM it's trying to load:

http://mysite.com/community/resources/styles/mystyle/headerbg2.png instead of just: http://mysite.com/community/styles/mystyle/headerbg2.png

We saw the issue with the script itself not loading and wrapped it in:

{{ base_url(property('pathToBackstretch')) }}

which seems to fix it for all setups. Is there any way of applying that to the string option we have above somehow?

 

[Mike]

XF2 doesn't use the <base> tag which allowed what happened before to work -- but caused all sorts of other issues.

If you're using a property in HTML as a URL, you will need the base_url call; if you use it in CSS, you don't, as css.php is always served from the root directory.

 

[Steve F]

This works, we'll just have to have separate fields for multiple images I guess.

.backstretch(["{{ base_url(property('xbBackstretchImage')) }}"]

 

[Mike]

Given that you're handing off to JS, we do have tools for manipulating URLs like that: XF.canonicalizeUrl()

That does depend how your JS is running exactly. We'd likely recommend using the XF framework rather than passing a property directly into JS like that (which isn't being escaped for that context, though a fairly minor point) which should make it easier to apply the URL canonicalization.