In my opinion sizing repeating groups has issues. It would be best if you could separate the space you want the repeating group to occupy (area of the screen where the list would be visible) from the size of each list element (row). To clarify, it would be nice if you could manually set the height of your row regardless of the height of your repeating group. Right now it just evenly divides the space by the number of rows you’ve picked. That would give more control over how things get displayed in repeating groups and it might solve some of the photo sizing issues I’m getting.
Have you looked into how repeating groups can expand automatically ?
Here’s an example I think will better describe the issue I’m facing.
Let’s say I put a repeating group in a space that’s 800px high. This is the space I want to fill with my list. I then choose 2 rows. Automatically, by default, each row is 400px high. Now I put an image in the row. If I set the image height to be 400px, when I run my app with some data, each row will have an image that fills it completely. Now, if I set the photo height to 300px, when I run the app, each row will now have a white band under each photo that’s 100px high. If I set the photo height to 500px, when I run the app, each photo will extend down past the edge of the row and it will be cut off. You won’t be able to see entire photo.
This is what happens regardless of what Run-mode rendering option is selected.
What this means is that I cannot set a size for my photo without either cutting part of it off or having a white band underneath it. Neither of which I want in my case.
I have to choose the number of rows such that it approximately gives me the size of the photo I want in my list.
That is why it would be better if the space the repeating group occupies is separate from the row height and they can be set independently. That would give greater flexibility on design, especially for mobile.
Thanks!
Have you found any solution on this one @alexis?
Repeating groups are actually quite good. Not everyone is using them to design photo apps.
In your case, set the run-mode rendering of each photo to “adjust element height”. The width will remain uniform, and they’ll resize based on your image’s height. The white space will remain the same after each photo.
Pro-tip: After inputting a dynamic image, select more and process it with Imigix. Check “resize to fit dimensions by cropping”. This is useful if you want all your images to be the same height without resizing or stretching the photo to fit your specified dimensions.
@Kackur So it turned out that Bubble had an issue in the way they saw the size of photos processed with imgix, which in turn gave me the sizing issue I was having with photos in Portrait mode. That has since been fixed and is working correctly. @emmanuel can give you more details if need be.
I still think it would be nice to have the options to set the size of the list element manually, independently of the space you want the list to fill.
Thanks
Thank you for this tip, excellent stuff! Was trying how to figure out how to make my images crop inside of a solid dimension.