Using images with variations via CSS is complicated

Kirby

Well-known member
Affected version
2.3.3
In XenForo < 2.3 it was easy to use a style property for an image as a background image in LESS:

Code:
.selector
{
    background-image: url(@xf-publicLogoUrl);
}

Using this code does not work in XF 2.3 any longer and requires a quite more complex approach:

While this does work, it isn't straight forward and requires quite a bit of aditional CSS for clients to parse and render.

XenForo already provides --xf-publicLogoUrl but as raw text (not even as a string which at least could be used for content()):

Code:
<html>
<head>Background Image Test</head>
<style>
:root
{
    --xf-publicLogoUrl: https://xenforo.com/community/styles/default/xenforo/xenforo-logo.svg;
}

#backgroundImage
{
    background-image: url(var(--xf-publicLogoUrl));
}
</style>
</head>
<body>
    <div id="backgroundImage">
        Test Background Image
    </div>
</body>
</html>

This does not work, so right now, --xf-publicLogoUrl seems kinda useless.

Suggested Change
Introduce a new style property value type URL, if a property has this type generate --xf-<propertyName>: url(<value>); if it has type String make sure the value is escaped.

This would allow to actually use such custom properties in LESS pretty similar to how it could be done in XF < 2.3:

Code:
.selector
{
    background-image: @xf-publicLogoUrl;
}
 


Write your reply...
Back
Top Bottom