XF 2.0 Path to images in designer mode


Well-known member

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?
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.
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.)
Top Bottom