Streaming live at 10am (PST)

Responsive Asymmetrical Gallery?


#1

I was wondering if it was possible to create a responsive gallery that looks something like this? Ideally it would be able to be connected to my collection page of projects and when I add a new project they would shift down. I also want to be able to hover over the image and then see the project name. I also can’t figure out how to get an sort of asymmetrical configuration to be connected to my collection.

Help please lol.


#2

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 -

  1. Drag a marquee around the first photo.
  2. 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.
  3. After saving to folder location.
  4. Now, in editor undo that action back to the original - repeat for each image.
  5. 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…
  6. 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.
  7. Now upload all new photos.
  8. In collection list they will all hold the sizing.

Let me know if you need help. See ya :grin:


#3

I don’t fully understand what you mean. The sizing isn’t really the issue it is the positioning. I don’t really understand how cropping would effect that.

Do you mean include the background as part of the crop so that it stays that way?