responsive gallery

[ad_1]

For a context the wordpress is for a client who will add themselves new images to new project page like a portfolio.

They want an image gallery like this [https://coulon-architecte.fr/fr/projet/381/strasbourg](https://coulon-architecte.fr/fr/projet/381/strasbourg)

I have tried CSS grid but I don’t know how to put a different class to different images (or how to have the client do that). I also want to keep each image ratio.

I have also tried flex box but some images need to be smaller in order to be on the same row as other. As you can see on the live website there is no particular pattern as why some images are on two columns or not.

Does it make sense? How could I achieve that ..? Thank you so much

https://preview.redd.it/508ar4nzwd7d1.png?width=2126&format=png&auto=webp&s=813de3763165b5da4ed86fb554326f45377c073a

https://preview.redd.it/u9cqiu470e7d1.png?width=916&format=png&auto=webp&s=594a7d628b338c52a432a31a90b67fd3e6da084b

[ad_2]
2 Comments
  1. It looks like you want a “Masonry” gallery layout. Masonry is the term to describe the examples you showed where different image proportions just fit into one another. Ala pinterest etc. You could either look up a “Masonry gallery WordPress plugin” which I’m sure there are dozens. Or if experience with ACF or building custom blocks. You could just build out various versions of image blocks with different dimensions/width.

    If this is just something you want a client to just upload 20 images of any proportions and it look nice on the page. Then I’d lean to googling the Masonry plugin if you’re not a coder. If you are a coder, I’d build a custom Masonry block with ACF and call it a day.

    The linked website you showed does the first route where it’s just a series of blocks. Gutenberg/ACF/Whatver you call them (as it’s not a wordpress site). They have a block that just puts a single image full width, and a block that is called “visuels-groupe” where they have the 2 images just floated side by side. This isn’t really a CMS site, looks to be hardcoded, so it’s very specifically done, with nothing really dynamic.

    If you wanted dynamic you’d do something using flex/grid/masonry as mentioned previously in either a plugin or building out the blocks yourself in gutenberg (saving each layout as a pattern), or ACF.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer