Advanced Image Gallery

[vinjak]

Hi there!

New here, new to blocs, building a website for my own business, have some IT knowledge, none of which include code…a short introduction for myself

I´m trying to create some kind of dynamic gallery which would host aprox. 50 images, probably masonry style and to add a filter option. I couldn´t reach or find some proper solution up to now.

The Gallery problem gave some of the unanswered questions, like:

1. Can Masonry Gallery brick be customized, like for example 4 instead of 3 images in a row or so?
2. Can I add multiple images to one gallery = more than 6?
3. How to create a fade effect + text showup when a mouse is pointed over the image?
4. The most important thing: a filter option for the gallery, for example if the gallery consists from 50 images of cats and dogs, a filter options to show only cats or only dogs and to rearrange the immages accordingly.

Sorry if the questions are to basic, but this gallery is kindof the core of my website, so I´m trying to figure it out correctly…

Greeting to everyone…

P.S. Merry Christmas

[PeteSharp]

Hi @vinjak

@vinjak

Can Masonry Gallery brick be customized, like for example 4 instead of 3 images in a row or so?

Yes. With a responsive design you tend to set a variety of column numbers based on device size. But you could define a max of 4.

@vinjak

How to create a fade effect + text showup when a mouse is pointed over the image?

You can do this but since a lot of people browse on mobile devices designs that depend on hover don’t work well across devices.

@vinjak

The most important thing: a filter option for the gallery, for example if the gallery consists from 50 images of cats and dogs, a filter options to show only cats or only dogs and to rearrange the immages accordingly.

Yes you can do this. Check our “isotope“ as an easy way to filter.

You could code this using the code bric. There are a lot of Bootstrap 4 examples online that cover what you wanting.