How to have two different images on the same x/y axis and use conditionals to display them

How do I
#1

Hello,

I would like to know if it is possible to have two different components (in my case images) situated at the same x and y axis. Then based on certain conditions, one image is displayed, while the other is not.

For example, in my case, I have two identical home icon images on my header, one is colored blue and the other is colored grey. When I am on the home page, I want to display the ‘blue’ home icon image on the header and when I am on a different page, I want the home icon image on the header to be grey. Is it possible to do something like this in UI Bakery?

Thanks.

1 Like
#2

Hello @ObyY!

You have 2 options:

  1. Use this code in the data properties of the Picture:
    {{state.someCond ? state.img1 : state.img2}}
    image

  2. Use showCondition in the 2 components, one of which will display “if the condition is true”, and the second one – “if the condition is false”.
    image image

Hope it helps.

#3

Thanks for the feedback and solutions.

For the 2nd option, is there a way for both images to be placed in the exact same position in the builder? Given that each time you press the + sign to add a new component, the new component always comes after the last component. I am not sure how to ensure both images are on the same x and y axis (so exactly in the same spot), so it doesn’t look like an icon is changing spots based on which version of the icon shows as a result of the Show Condition. I hope my follow up question is clear.

Thanks.

#4

@ObyY
It can be achieved only if you pursue the following aim: to display two different images at one place depending on a particular condition. If this is your aim, you can use the two options described above to achieve it. In this case, these two images will follow one another in the Builder mode, while in the Preview mode, one will hide behind another (because of the applied condition), and only one image will be displayed at one moment.

#5

@ev_jennie, thanks for that info! I will give it a try.

1 Like