I really appreciate how supportive this forum is for being so helpful with things that I think are really basic, but I still struggle to figure out. I don’t even know what to call some of this stuff.
My first question is how to get an image layout looking like this:
I’ve seen a lot of image layout stacks where things go in a grid and fit nicely together, but the examples have same sized images. I’ve tried a couple of stacks and things either don’t interlock or it goes haywire.
Something responsive that would go from 4 columns to 2 on phones would be ideal.
Thanks!
Just use a grid or 4 col stack, with images dropped in that are created in the shape you want. You can set it to be 4 columns on larger screens and 2 on smaller screens, down to 1 on phone if you want.
or, if you want a larger gallery, you can use something like https://stacks4stacks.com/progallery/… Example on this page: https://www.lisasandlerphotography.com/lifestyle_portrait_photography/couples_portrait_photography/ you can see that I am a photographer and use different ratio croppings. All photo files are the ratio/shape I want, though I have mine in at random, you should be able to see how this can work.
What you’ve drawn is often referred to as a ‘masonry grid’ layout in web design, because the staggered blocks are reminiscent of the bricks in a wall.
The aforementioned ProGallery stack is a good choice for creating this type of layout. Two other options worth considering are Masonry and Wall. These are more dedicated towards building masonry layouts, so you might find them easier. You can control how many columns are created on different screen widths.
Basically the Masonry stack has a lightbox / popup effect to reveal images at full-size, whereas the Wall stack simply presents images with normal links applied. All three have a free demo version to tryout and will be on discount later this week for ‘Black Friday’ and for a short period of time thereafter.
Thanks, I bought the JW Fluid Column stack (before it was discontinued) thinking it was a good masonry type system, it’s a bit unwieldy or just too much for what I need it to be.
I’ll check these out.
Tried out the demos, one of the issues I’m seeing is that I can get the basic thing up there and looking good but when I test it on a smaller (iphone) screen I have limited control over how the images arrange themselves. It’s got a mind of it’s own and I don’t want it to.
If my concern is just having it look different on a mobile device, should I create two instances of the same content but have one hidden on the phone and the other only visible on the phone?
