Custom Collection Image Gallery

Design help Custom code
1

I’m working on a project where I have a CMS Collection List displaying a gallery of images. My goal is to achieve the following layout:

  1. Horizontal images (landscape orientation) should span the full width of the grid (taking up a single row).
  2. Vertical images (portrait orientation) should display two per row, side by side in their respective columns.
  3. On mobile, I would like the images to be in one column.

What I’ve Done So Far

  1. Grid Setup:
  • The parent container (project_collection-list) is set to Grid Layout with:
    • 2 columns.
    • Auto rows enabled.
  • Dynamic items (project_collection-item) are auto-placed by Webflow.
  1. JavaScript Logic:
  • I wrote custom JavaScript to dynamically adjust the gridColumn property based on image orientation:

document.addEventListener(“DOMContentLoaded”, function () {
const images = document.querySelectorAll(‘.project_item-image’); // Select all images

images.forEach((img) => {
const parent = img.closest(‘.project_collection-item’); // Get the image’s wrapper
img.onload = () => {
if (img.naturalWidth > img.naturalHeight) {
parent.style.gridColumn = “1 / -1”; // Horizontal images span full width
parent.style.gridRow = “auto”; // Ensure proper row placement
} else {
parent.style.gridColumn = “span 1”; // Vertical images stay in one column
}
};
});
});

With this code the vertical images are displaying side by side in two columns as expected, but the horizontal images are not spanning the full width of the grid. Instead, they remain confined to a single column.

Any advice, insights, or alternate approaches would be greatly appreciated! :blush:

Thank you so much in advance for your help!

Here is my site Read-Only LINK: Webflow - [WIP] McCall Designs

And live version to see how the code is working: [WIP] McCall Designs

2

In general, you’d want to set the grid to 2 col, and then on the horizontal images, set colspan to 2.

However for this to work, you’d have to explicitly arrange your collection list so that it’s landscape, portrait, portrait, landscape, portrait, portrait.

In theory if you do eager loading on your image than when your script runs it might be able to get the image height and width correctly, and then sort the list in that fashion as best as possible, but you see the problem. You’re building a layout engine here, albeit a simple one.

Also make sure the images are loaded first, even with eager loading, you will probably need to connect into a load event and ensure every image is loaded before your script does anything. That’s super inefficient, you’ll see a delay before your layout engine can commence operation.

You’re likely better off putting the image natural width and height directly into the CMS, or at least an orientation so you know which rule to apply.

3

To fix the issue, ensure that horizontal images dynamically adjust their parent container to span the entire grid width after the images load. Confirm that the grid layout settings allow items to span multiple columns and rows as needed. For mobile, apply a responsive design that stacks all images into a single column using CSS media queries.