Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Editor X

Design your boldest creations.

Jul 23

Change Image file based on breakpoint.

I really feel like I'm missing something here, as I can see that on the Editor X Breakpoint Tutorial 1 they show the image of the fan changing image file on the mobile breakpoint (it goes from a side-on shot to a front-on shot).


I went to do this on my site and can't seem to get it to work. Dropped down to the mobile breakpoint, changed the image, and it affected the desktop and tablet image file too.


I thought it could be as I was doing it on a stretched hero section, but when testing it with other placements it always changes the file for all 3 breakpoints.


Am I missing something here? Is this a bug? I definitely got this to work at some point before.

1

Hi, Great question! You can’t change the image file per breakpoints, yet breakpoints allow you to show/hide specific elements between breakpoints. What you need to do is to go to the desired breakpoint, right click on the item you want to hide, select “don’t display”, and add a new image component. The new component should be automatically hidden from the upper breakpoints.

Sebi,


Thank you for replying so quickly, with exactly the answer I needed! I'll put that in place later today.


Do you think this function could be streamlined into a feature at some point? As it's such a big part of normal web design to be able to change the source file at different screen sizes, is there a way that Editor X could handle it better? Would be great for loading different resolution videos by screen size to improve performance too.


I picture some kind of interface like the image below, but each breakpoint box would preview the image and allow you to change it.


If you think it's worthy of a feature request, I'll make a post there.






1
Jul 24

I had an issue with images missing on mobile devices and was able to resolve by going to the image under the layers settings. Double click on the image and you may be able to deal with it then.