XF 2.0 Path to images in designer mode

[CMTV]

Hi!

I have enabled designer mode and all my template modifications are written at src/styles/<designer_id>/.

Now I want to set a custom image for site background. Where should I place my image? How access this image inside templates/less files? Maybe there is a spical function to be used in templates and special variable for LESS templates?

 

[[xFv]]

I usually put my background image in Style Properties/Page Setup
and then page background at the very bottom.

 

[CMTV]

I usually put my background image in Style Properties/Page Setup
and then page background at the very bottom.

Yes. But there you have to write down the path to background image. And I don't know what is the correct location for image files for xF 2.0 styles especially with designer mode enabled.

 

[Mike]

There isn't any special handling for images in styles. You need to place them in whatever "normal" location you want. That would generally be within styles/<style_name>/ and then possibly in another sub-directory if the images relate to an add-on.

You'd then just access that path in templates/CSS. Note that if you're doing it in a template, you likely need to call the base_url() function on it. This is an example using the logo:

{{ base_url(property('publicLogoUrl')) }}

(Which also pulls the logo URL from a style property, which is often a good idea.)