Pro Gallery - Categories/Filters?

Ask the community
1

Hi all!

I’m a Photographer and I want to have a Gallery where visiting users can click separate categories/filters on the left hand side. (See below for Example)

https://static.wixstatic.com/media/a27d24_f87695ed1a72490ba7d3ddd7aebc9ace~mv2.png(image larger than 4 MB)

When they click a category, a new gallery appears with images specific to that category.

What is the easiest way of doing this without sending them to a completely separate page? I’d like to keep it all on one “page”.

I can only seem to figure out how to get one gallery at a time.

Thank you!

2

I suspect that there’s someone here who can suggest an elegant solution. FWIW, I can suggest a crude solution that makes sense only if the number of categories is rather small.

That solution would involve creating one pre-defined gallery for each category and setting it as ‘collapsed’ (except, perhaps, for one gallery that would be the default, visible gallery when the page is loaded).

Then turn each category into a button that would run some Velo code to (1) expand the gallery for that category and (2) collapse any other expanded galleries.

3

Hi @evantaylorstudios ,

So here is the solution I found for filtering a pro gallery, I made a video that explains it, basically you are using the content manager to populate your gallery and using a dataset to filter it, its in this video here:

https://www.screencast.com/t/q3UUW0Fx

Here is the code:



import wixData from 'wix-data';

$w.onReady(function () {

    $w('#dataset1').onReady(() => {
        $w('#button1').onClick((event) => {
            let filter = event.target.label;

            if (filter === 'All') {
                $w('#dataset1').setFilter(wixData.filter())
            } else {
                $w('#dataset1').setFilter(wixData.filter()
                    .eq('category', filter)
                )
            }

        })
    })

});

hope this is useful to you!

4

Hi, @idoh . What a terrific, clear video.

I’m not the OP, but your video helps me with something I’m working on, too. Thanks so much!

5

@idoh - Thank you for the detailed video. Running through it now!

6

@idoh i’m trying to create the same filtered interface as is detailed above. Is there a way now to achieve this without code, or is it still a custom code process? Unfortunately the link to that screencast is now broken.

Any help much appreciated. Thanks.

7

@flood-jesse So currently this exact setup with text/buttons filtering the gallery, would require the use of code.

If you’re not well-versed in code, you can use dropdowns to filter by user-input. https://support.wix.com/en/article/filtering-content-based-on-user-selection
There’s a feature request for more options from more user-input elements like selections tags that were probably used in the example. https://support.wix.com/en/article/request-filtering-collection-content-from-a-selection-of-user-input-elements

There is an option to make sub-galleries for a gallery too .

8

Hi could you reupload the video? The link is broken. Thank you!

9

Hi @deeperjk0901 , I tried to create a video for you showing how to filter a Pro Gallery. I hope this is of help: https://www.screencast.com/t/roAyz8xnHO

Here is the code I used:

import wixData from ‘wix-data’ ;

$w . onReady ( function () {

$w ( '#dataset1' ). onReady (() => { 
    $w ( '#dropdown1' ). onChange (( event ) => { 
        let  category  =  event . target . value ; 

        $w ( '#dataset1' ). setFilter ( wixData . filter () 
            . eq ( "category" ,  category ) 
        ) 
    }) 
})

});