Okay, I see what you’re trying to do… but here’s the issue. On collection lists, each block is actually the same class/block (in essence, you know what I mean, Webflow treats as basically a copy).
Obviously, it’s intentional. So to do this, you’ll need to start this in your photo editor. Photoshop, Affinity, etc.
Create a mock grid on the canvas in the photo program. Resize each image accordingly and position them how you want. You’ll be able to adjust/tweak width and height independently in there.
Once done -
- Drag a marquee around the first photo.
- While marqueee is active, go resize document to that size, it will shrink the canvas to the edges. All other photos will be off canvas. Export normally.
- After saving to folder location.
- Now, in editor undo that action back to the original - repeat for each image.
- Make sure you don’t save the entire mock file after cropping to the photo. So now, each photo will maintain it’s aspect ratio. Then…
- In Webflow Assets, delete all the other photos so you don’t have duplicates with different sizes, If any have the same filename, delete all before uploading to Webflow. It’s best to change all the filenames so Webflow doesn’t think it’s the same.
- Now upload all new photos.
- In collection list they will all hold the sizing.
Let me know if you need help. See ya