Let’s say I have a symbol that uses a background image on the containing box. I want people to be able to choose a specific image to show for mobile devices, while on desktop to use the background image input I already have.
To do this, we will need to do two things:
- modify our data binding to use a new input when the device size is small.
- add a new input to our symbol that allows a user to choose a file for mobile background image
To accomplish #1, luckily Builder provides a
deviceSize property on state that can be accessed within bindings. So for the
state.deviceSize === 'small' ? "url(" + state.mobileBackgroundImage + ")" : "url(" + state.backgroundImage + ")". This tells Builder to use the
mobileBackgroundImage for any device that is
small, and then use the regular
backgroundImage for all other devices.
For #2, we just need to scroll down to “inputs” section in the data tab, and click
+ NEW FIELD. Then we add the new field, calling it
Here is an example Builder fiddle with this code that should make things more clear. Make sure to click on the different device sizes in the editor preview to see the image change: