I’m currently trying to make a masonry grid style gallery to showcase various architectural projects, and I’ve got this far:
I’m fairly happy with how that particular project looks, however when projects with fewer images are loaded, such as this:
You can see that it loads from left to right, rather than top to bottom.
I appreciate this may a quirk owing to the way I’ve set it up (I followed this ) so if anyone would be so kind as to help me get it right, it would be much appreciated. Ideally I would like a way of forcing the number of columns to be fewer when there are fewer items to load (unless someone else has a better idea). I am sure flexbox might be able to do this, but I’m stumped if I know how!
[EDIT] I should probably add that I’d like to be able to click these images and them show up in a lightbox.
Hi there, you never received anyone in the community to assist in this? If not, yep flex is the only way to do this fluid. It will take % percentage tweaking upon adding.
Okay the first thing you’ll want to do is - in PS, Affinity or any photo program that exports - make all the images the same size! It saves all the tinkering later. I would make them as big as possible. 2500x750 minimum. I like that size because that’s the full width for hero headers on all screens, and it’s the primary landing vertical viewport for most desktops/laptops.
Adding each image will fit the same to start. Once you begin setting up the grid, you won’t have white space. Fix that first, then message me back.
Now your masonry style, based on how you have it setup with:
2 medium images stacked
1 tall large in middle
2 medium stacked
You’ll need 3 columns made of flex divs, and it’ll work. Then I can go into your read-only link and set up a flex masonry test to show different options.
I have already rescaled all of my images to 2000 by x (many are different aspect ratio’s) for this site. I was hoping for something similar (though not necessarily identical) to this:
Yes, Marci has a point. You could add a plugin, which isn’t a great idea. So what I mean is, normally we would put 1 section, add a div wrapper, then insert the images and move them around and shape with flex. If you don’t want to add a plugin. Then simply use divs with % or px sizing locked in with the image portrait or landscape style.
Basically you would create the grid with divs that are locked in. But using images that flow doesn’t always line up the way you desire.
For example, if you have 1 div on left & right, but you need a tall portrait div centered in between these, flex alone won’t create that without tinkering (like Marci says “hacking”). But if you set a grid manually, you’ll need set sizing to keep this staggered grid alignment. Essentially allowing to place images as is, and that’s what a plugin would do.
I like your site structure, it looks great! A plugin will be a solid fix, to prevent locked sizing. It’s a personal choice, and you’re basically done. Simply depends on what you choose to manage.
Sorry for the late reply, I’ve been busy with other things as of late and am just looking into this again.
Quickly trying the masonry.js version I can’t seem to find a way of making it work with my CMS? It requires a collection list, and my images aren’t part of a collection per se. Feel free to take a look at how I’ve got it set up currently. Unless of course I am missing something glaringly obvious?
Specifically the part I am stuck on is that I can’t seem to find a way to create a list that gives me the option (as per the tutorial) to have a 3 column layout without selecting a CMS collection to load? I just want to load individual images from projects within the CMS, not list the items in the CMS.
I am reluctant to use a manual method as this means that I (and eventually the end users) will have to make sure certain image sizes/aspects are only uploaded in certain image slots for the layout to work, etc. This will be a nightmare across dozens of projects.
