Repository navigation
Original aspect ratio of image in DataViews #81567
Description
Now that #79329 has been merged and DataViews is powering the media in the modal within Gutenberg’s experiments, I think we need to talk again about displaying the original aspect ratio of images in DataView’s image field.
With the introduction of DataViews in media, displaying entries at their original aspect ratio is key to a good UX. Identifying the image ratio is crucial to prevent unexpected outcomes when inserted into the canvas.
#63487 introduced different ideas, and I think this one by @richtabor is a great first step.
One value of layouts worth highlighting is that each layout establishes a different visual hierarchy, and depending on the type of data, it works better in certain cases than others. For instance, the original aspect ratio of images works better in a grid when selecting images intended to be used as such. But it might not work as well in a table if some images are tall and others are wide.
Layouts prioritize certain content through their design, and default views for each screen suggest which layout could work better for the type of content it displays.
What is your proposed solution?
As per the solution, I would add a ToggleControl in the View options between Density and Preview size that comes on by default in the Media in modal
[On/Off] Original aspect ratio What do you think of this @andrewserong, @richtabor, @WordPress/gutenberg-design, and @WordPress/gutenberg-components?
Activity
andrewserong commentedon Aug 14, 2026
Thanks @fcoveram I feel like you read my mind! Yes, I'd love for us to try out a toggle to switch between contain/cover for the display of images, and to default to preserving the aspect ratio. From memory @annezazu also flagged this for when we look at the media inserter, so just also linking to the following, as whatever we do for this feature we should likely do the same when we redesign the media inserter:
One question re: how it'd look on the overall canvas/body area of the dataviews:
Would we still have a square for the grid item (and the border being at the edge of the square) with the image contained in its aspect ratio? I.e. something like:
Or were you imagining something more like a masonry-like layout? One issue with the patterns screenshot above is that the items don't line up visually which can be a bit hard when scrolling through a large list of items, so I'm wondering if retaining the square area is important here 🤔
andrewserong commentedon Aug 14, 2026
I've tried out a draft for this over in:
It's just a draft for now so we can see how it looks and feels. Here's that PR's current state:
Already I'm noticing that the checkboxes can be a bit hidden and the overall grid item can look a bit stark, so maybe they need a background color? Happy to keep hacking on this next week if we think it's worth pursuing further!
andrewserong commentedon Aug 14, 2026
@tellthemachines raised a good question while we were chatting about this just now. Do we know that users would like to toggle this? One option could be to keep this flag as an internal
layoutflag that the consumer can declare for the individual DataViews instance, if we don't want to clutter up the Appearance popover. So the default would still becoverfor consumers, but for example, for the media picker we could set it tocontain.In any case, #81604 tries it out with a toggle — we can always pare that back if it feels too much!
fcoveram commentedon Aug 14, 2026
Thanks @andrewserong. I just added a comment in #81604.
I'm opinionated about this, and I would say it should be enabled by default in media-related views.
Since the interaction that occurs after selecting one or more images displays the images at their original ratio, knowing this in advance of the user journey is key.
tellthemachines commentedon Aug 17, 2026
If we leave the toggle out for now, we can always add it in later if we determine it's wanted. Otherwise, if users don't really want it, it becomes clutter.
Also, if someone accidentally toggles the original aspect ratio off, they'll end up having a worse experience and might now know how to switch it back.
jasmussen commentedon Aug 17, 2026
Worth probably adding a light grey background to the bordered cell, so each item still feels like a unit.