How can I create and connect a background-image property to a component in Bricks? Couldn’t find relevant topics.
I created a card component that should have variable background but I cannot link a background-image property to it.
Any help is appreciated!
From my understanding and use of the component system, the component’s definition should own the look whereas the consumer controls the content plus a bounded set of choices. If any prop can set any property (like connecting the background-image property to an option to add anything), the component’s styling is no longer owned by the component (the bounded set of options is meaningless or repetitive).
If you want the component to appear differently in different contexts (a section may be normal or danger variant and would update the look accordingly), use variants. Then the consumer can select from a list of options (variants) for what background-image to apply. It keeps the component within the system, not allowing for drift that an open-ended background-image prop connection facilitates.
Props should configure components’ content and bounded options, whereas styles should be owned by classes/variants/tokens. If it’s component-specific, it should be a variant; if it’s cross-cutting treatments like a surface (surface-muted or surface-inverse can show up on sections, cards, and callouts alike), global classes exposed through a class prop may be better.
In my case I am the developer and the customer also.
I think that the background image is also a property that can and should be varied by the user/customer. Like I said: I wanted to create card elements with variable background images. There should be an option for me to select any background for any card and not just a select few that the variants would offer. Now I have to expand all these cards from components and style them individually cancelling the benefits of having components that I can reuse and modify at once if needed.
It would be middle ground if we can use text based properties in native CSS. Then I can define a URL of the image that I can link in the CSS like this:
%root% {
background-image: no-repeat url('%defined_background_url%');
}
@timmse what is the developers’ opinion about this need/issue/use case?
The problem is CSS cannot handle dynamic data properly. Even now, if you add the background image inside a class, Bricks will make attributes like ‘data-query-index’ to handle it, because class properties must stay the same.
To be honest, it’s better to use actual <img> with position: absolute and inset: 0 where you need a background. It can be easily converted to webp/avif, lazyloaded, have an alt attribute etc.
Thank you, I will try this method!