How do I create a mobile specific background image input in a symbol?

Technical Questions
1

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:

  1. modify our data binding to use a new input when the device size is small.
  2. 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 style.backgroundImage binding, we would want to put in a javascript binding of 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 state.mobileBackgroundImage.

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:

2

On production, I’m having an issue where deviceSize is always large using this code with the HTML API. Passing along &userAttributes.device=mobile doesn’t seem to help

3

Hi @markpinero,

Are you still experiencing this issue? If so, would you be able to elaborate a little more on what your tech setup looks like (i.e. are you hitting the HTML api on the server and then sending that to the client, are you fetching client side, are you integrating with any js frameworks or is it just plain vanilla js) so we can try and reproduce? If you are able to share a reproducible example via github or codesandbox that would be even better.

Also, is the problem that the image does not change when the window size changes, or is the problem that the default deviceSize on initial server request is large?

As far as the &userAttributes.device=mobile not setting the device size to mobile, can you share the full url of the request so we can try and debug further?