Image dimensions for card view layouts

I want to optimize some images to be used in card views. What are the dimensions (or, at least, the ratio) for the image block in each of the card view layouts (i.e., list, photo, backdrop, large)? AppSheet Help provides lots of specs regarding optimal image dimensions for detail views, but I don't find anything for card views. There's one reference in the community from more than 3 years ago; it implies that at that time there was only a single layout (or, at least, that all layouts used identical image dimensions).

2 5 445
  • UX
5 REPLIES 5

@lizlynch, is it possible to get this documented?

Yes, it will be good to add those image dimensions details for the card views in the help documentation.

Card view has been wobbly by nature.

The reported odd behaviors has not been addresseed at all.

This could be affecting the current usage of card view, I would say sadly.

@Steve  knows better much about the background story.

 

@dbaum - Will research and get this in the documentation! Thanks for the suggestion!

These are the breakpoints for the photo/backdrop/large card views from 2020. I don't believe they've changed.

Screenshot_20230330_032835_Chrome.jpg

devW = device (screen) width

wMin/wMax = upper and lower widths for visible area.

Basically, if you have a 752x180 image, the guaranteed viewable space using cover is the 300x180px region in the center of the image.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 752 180'>
<rect height='180' width='752' fill='red'/>
<rect x='226' height='180' width='300' fill='blue'/>
</svg>

 

The list view is just a 1:1 aspect ratio image, so no magic there.

Top Labels in this Space