Add options to Masonry photo galleries

Hi all ! (sorry for my english, i use google trad.)

I am just starting out on Blocks, and I would like to redo my site with this application.

I have a page that will be my photo gallery, and I would like to arrange my photos with the Masonry block. So far so good.

But is there a way to add tags to photos so that the user can sort them by searching? I did a search on the forum, and from what I read, apart from touching the source code of the generated files, it is not possible, you confirm?

Then, is it possible to arrange the image blocks randomly in a containing block? Or is it up to me to arrange each image block a little here and there?

Thank you !

Hi @plumedours, I can’t answer your first question about adding search terms, but I use Volt CMS for my gallery and with this you can drag the order of pictures to whatever way you choose.

@TrevReav Thank you for your quick reply ! I see that the CMS costs 99 euros. It is not in my budget unfortunately. But this CMS looks to be really good indeed!

I will continue to look for free solutions, I am not making a professional site nor making me money ^^

1 Like

You can sort by category with a menu system where by clicking on a category only the photos of this category appear. Unfortunately I can’t help you with this because I haven’t tried it yet for my portfolio. But if I find any information while browsing the internet I will let you know

Thanks for your advice, I’ll do some research for this search bar!

@Alpha Is this the Toggle Visibility option you’re talking about?

No this bar is used to tell you that this element is visible on the 4 supports. If you uncheck the shelf your item will not be visible in the shelf mode

Ah, so I don’t have a function to categorize my photos. Which side should I see to do your technique?

Is this what you want to do?

Tuto with Jquery

Or other videos HTML CSS Jquery

It’s exactly that ! Thanks, I’ll watch it all :slight_smile:

Hmm, they don’t say how to integrate it with Blocks, I’ll try to see how, because I don’t have much knowledge for that … Thanks ^^

I’d love to be able to add a quality photo gallery also.
I’d love to see, and be happy to pay for a bric, but I guess the issue is different people want different galleries.
For me, a gallery, maybe with a thumbs strip below would be good, a filter would be amazing, and sub-categories would be fantastic also.
I use juicebox at the mo. It’s good and seems fairly lightweight but it adds another step. But it works.
I also use an Instagram plugin as this works remotely; but the full size images are seen by a linking across to Instagram.

1 Like

For the quality of photo I go through a site to reduce the weight of files without losing quality in terms of weight for files in jpg, png or pdf, there is a difference. You have 3 choices and each site have their specification:

1 Like

I think I will forget this idea for the moment, I am not good enough in development to succeed in integrating this kind of plugin in the Blocks application (like the example of Alpha, or even on the Isotope site, which is much the same).

Unless someone would be kind enough to guide me step by step, I think my gallery will not have this function. Or if not I have to use another software maybe, too bad :confused:

For the quality of the photos, I installed them in Blocks via URL, put all the photos on my server and added the urls of each photo, this way Blocs didn’t ask me to shrink them .

Hi @plumedours,
Here you go:

All is in a code widget but could be easily turned into Blocs / Card structure.
Here’s the file to get you started:Fancy Filter.bloc (725.0 KB)

4 Likes

Hi @Alpha
I use JPEG mini

1 Like

Hi @Jerry
Food for thought!
I minimise my photos anyway, so I guess I could make a full size and thumbnail size copy for each image. So could the card be clicked to open a full size image (in a light box I assume)?

At the moment I use tabs to link to different slideshows. I can also create a hierarchy (ie sub-level tabs) thanks to Tab Anything.
The slideshows element works well but can’t be done in Blocs.

1 Like

When I talk about reducing the quality of photos, it is that some applications or websites reduce the file size but also the quality which is a big problem. The goal is to reduce the weight of the photo without altering its quality. Having photos on the server with url, ok but if your photos are all 1mo, 2mo, 4mo, your site will slow down drastically and will take several seconds or even minutes to load. So an average customer who visits your site where there is a long loading time believe me he will leave before even qiue the gallery or photo loads. You need a fast loading time. This is a very important information that should not be overlooked. Don’t expect Blocs to tell you this, I don’t even know if Blocs will tell you about this. Blocs is a working tool, he does what he is told. He doesn’t think for us, he’s not an artificial intelligence lol

Technically it’s possible to have a thumbnail photo and by clicking on it a larger photo. With an href or link of the photo different from the thumbnail.
Your gallery is correct and thinking of it this way in the design is right and logical. You have so much information to put. That it is possible to make sub-menus as you suggested. When there are 2 sub-menus it is ok but beyond that I find it not practical for the user. You can imagine that we click on a category and that I have an endless sub-menu that opens and that I have to choose. Personally not very practical

1 Like

Hi @Jerry!

Thanks for your help, I’ll take a closer look. So, since it’s a widget, do I have to add my photos from the lines of code and not through the block structure?

1 Like

Just add your pictures to a folder on the server. In the file it looks like this: src="…/w3images/mountains.jpg" Just replace it with: src="…/myfolder/mypicture.jpg"

Right, I tried this right after sending my message, it works. So, I have 132 photos to take :rofl: I’m going to have fun!

And if I want the photos to open wide in a lightbox, I have to add a piece of code for that if I understood correctly?

Suddenly, I ask myself the question … Why do all this with lines of code if we use software that normally should avoid coding? ^^