I’ve started methodically trying to use the built-in components and I discovered a bug in the Image component, specifically with the Aspect Ratio custom setting. If you set it on the mobile screen, and then attempt to change the ratio at a different breakpoint (say, tablet or desktop) the image defaults back to the original size/aspect ratio.
Also, in the properties the ‘sizing’ section includes the property ‘File Size’ with isn’t really a file size issue, but an image size/optimization issue. It’s a little confusing as it’s not entirely clear what it’s doing. If I select ‘Device’ will that create a new image for each device/breakpoint, or is it sized to the max width of that device viewport (it would be nice if the dimensions by the device icons updated to reflect the min/max values for each breakpoint).
This is one we’re aware of - it’s not actually a bug in the Image component, but rather that text inputs are not currently responsive.
Agreed that we need more clarity around this!
At the moment Device will generate a device sized image for each of the screen sizes setup in the Theme Studio.
This is ideal if the image is full width across all devices, and/or as a quick and easy way to get as close to correctly sized images as possible, without the user needing to manually enter the widths.
If you want more control over the generated sizes of your image then I recommend you use the Custom setting and enter a width manually for each device.
Thanks @bon. Yeah, I think the ‘sizing’ section needs some love as it’s not intuitive yet.
The other thing I noticed is that if I choose an Image & Text element/component the options available to me for the image are much fewer than I would get with a normal image element.
This is indicative of a larger issue with the elements in that the properties available to each often feel very arbitrary, and ad-hoc. For core elements especially, it would be nice if the common ground between them was exposed in a more consistent manner; for instance why can’t I specify a background or a border on a container or a flex/flex item, but I can on a section? Why do sizing and spacing groupings often contain the same properties with different elements?
I’ve slowly been working on an audit of all of the core elements and their properties (exposed, naming, grouping, etc) and I’m hoping to share it in a couple of days, along with some recommendations as to how to improve the overall user experience and expectations when working with elements in the editor.
