Streaming live at 10am (PST)

Fluid grid with multiimage?

Hi cool people!

I am trying to take 2 images from my CMS page’s multiimage field and output them in a Collection List where one CMS image is landscape and takes up about 66% of the width, the other is portrait and takes up about 33% of the width. They should sit next to each other, like so:

Right now, the Collection List Item holds a div that holds an Image.

Does anyone have a great idea for solving this? I’m aware that the current multiimage has limited functionality (no support for slider, no “limit” or “start from”, etc) but I would very much prefer not to have 2 separate image fields in the backend for the client to upload to (that’s going to be my fallback, if I can’t solve this.)

Here is my link: https://preview.webflow.com/preview/the-beowulf-co?utm_medium=preview_link&utm_source=designer&utm_content=the-beowulf-co&preview=f23bf0eeae1b792328a75bdce7213d48&pageId=5ddc29bed31f0f2c6972017b&itemId=5ddc2d3aaa6eff69dbda6932&mode=preview

Thank you in advance for any ideas, insights or tips.

The real question here is how broad your design case is, here:

  • how many images will the client upload? Always 2? (simpler) From 1 to more than 2? (harder)
  • is what you need really is “one CMS image is landscape and takes up about 66% of the width, the other is portrait and takes up about 33% of the width”, or is it rather: “I want the images to sit side by side, taking up all the height and filling up the width, whatever size and ratio they have”?

I think that by selecting the parent of the collection items and make it Flexbox, you can maybe find a solution for your case. But as you said, the images being children of an upper box is making it quite a challenge.

I can’t try on your link, it doesn’t work for me, can you double check?

Hey Vincent.
Thank you for going in on this, I really appreciate it.

To answer your questions:

  • For this specific case, the client will always upload 2 images.
  • And you are absolutely right. It is rather "I want the images to sit side by side, taking up all the height and filling up the width, whatever size and ratio they have”. If that is not possible, the second best would be as I described it with 66% and 33%.

I’ve been playing around with the Flexbox options, but I can’t seem to find a way to differentiate the two. I’m just given a 50% 50% view.

Apologies on the broken link beofre, I thought I had checked it before I posted.
I generated a new one, just tested this, it worked for me (in a browser where I’m signed out of Webflow) Please see if this one works

Best regards,
Jacob

Hi Jacob,

Chiming in here with the solution that works for me on many projects with this exact desire.

I personally would use Flexbox vs Grid on this, as it’s a little more specific and flexible (no pun intended ;). I would create a Flex container with two divs inside (Horizontal, Align set to Stretch by default).

Select the main (landscape) div and set width to 66% and sizing to Don’t Shrink or Grow. Select second (portrait) image div, set width to 33%, height auto, Sizing to shrink or grow if needed (default)

Set the 66 one to height of 0px (portrait stays auto height), then set the padding-top to whatever aspect ratio you want (perhaps start with 40%). This will then scale the height of the div (and therefore the portrait one and the main Flex container) automatically to the correct aspect ratio, when the page scales up or down for responsive needs.

Add margin-left to the portrait div to add the gap between them, then adjust that across breakpoints to suit your needs.

Set your images as background images for those divs, and you’re good. If the background scenario fails for whatever reason, put the images inside those divs with overflow set to hidden.

This setup works beautifully across responsive breakpoints, as it’s based on an aspect ratio defined by the % of the div’s width.

I hope this helps.

Steve

Hi Steve.

Thank you so much for this thorough walkthrough. It looks like it does a beautiful job of getting the layout right and making it work great responsively, especially if I was building a static page.

However, I am trying to find out how a layout like this can be connected with a multiimage field from the CMS. Perhaps I’m missing a step here that obvious, if so, my apologies?
When I try to redo it your way, I cannot get my 2 images to go into the 2 divs in the flexbox, it’s the 1st image from the multiimage CMS field that sits on both of them.
I have to somehow gain control of the Collection Item in order to obtain the layout.

Best,
Jacob

Hi Jacob,

Hmm, have you tried instead having single-image fields in the CMS collection, one for hero landscape and one for hero portrait, then link those explicitly to those two containers?

A multifield, I can understand that might be tricky. But this might work?

Steve

Hey again.

I haven’t tried that yet, but I think that might be the solution.
I’ve been playing around with the multi image field today and can’t really produce the results I want.

Thanks so much for your input!
Best, J.