Filter a gallery with buttons

Ask the community
,
1

Hi! I need help filtering my dynamic gallery using buttons, not a dropdown or search. I’ve seen lots of articles about how to filter my database with a dropdown and/or search bar, but I’m not having any luck using buttons…

More details:

  • images for each database entry
  • each image may have multiple tags/categories (set up as boolen fields)
  • I want buttons at the top of my gallery to filter the gallery view on click, but the default view should show everything
2

Right now nothing is displaying at all:

import wixData from ‘wix-data’;
$w.onReady( function () {
//TODO: write your page related code here…
});
export function identityButton_onclick(event) {
// only view items tagged with identity

$w(“#workDataset”).setFilter(wixData.filter()
.eq(“identity”, Boolean( true )));
}
export function patternsButton_onclick(event, $w) {
// only view items tagged with patterns

$w(“#workDataset”).setFilter(wixData.filter()
.eq(“patternsillustration”, Boolean( true )));
}

export function uiButton_onclick(event, $w) {
// only view items tagged with uiUx

$w(“#workDataset”).setFilter(wixData.filter()
.eq(“uiUx”, Boolean( true )));
}
export function letteringButton_onclick(event) {
// only view items tagged with lettering

$w(“#workDataset”).setFilter(wixData.filter()
.eq(“lettering”, Boolean( true )));
}

3

Okay so, now it appears that this code is working…but the images aren’t being displayed…If I click on where they’re supposed to be, the links work but I can’t actually see the images. What’s happening?!

4

update: this code works, EXCEPT you CANNOT use the Wix Pro Gallery. Has to just be a regular gallery.

5

Very nice! And I love when people come and ask a question, then answer their own question and update us! Super helpful - Thank you Leah!

6

Leah, just to remind you that the Wix Pro Gallery is actually a Wix app and therefore it isn’t always possible to integrate it with code on your page as the app itself might tend to either overwrite the code with it’s own app settings or it just choose to ignore it in the first place.

Not every Wix app is able to be integrated with code, some do have their own API and functions, however others have no code options at all or you are limited to what you can do with that app through code.

If you want to use code with a gallery, you are always better off just using a normal gallery from Wix and not one that is through the Wix Pro Gallery app.

7

Hello, i didn´t understand exactly if the original goal was to filter using tags associated with each image in the database collection. It´s what I am trying to do without much success.

I found this example in another thread, which is exactly what I want to do: https://eyalcwix.wixsite.com/selectiontags-filter

but the thread, as all others i´ve found, only has instructions for filtering REPEATERS, and not GALLERIES. I´ve tried to adapt a code i’ve found, but it doesn´t work.

import wixData from ‘wix-data’ ;

const databaseName = ‘PAPEL’ ;
const databaseField = ‘suporte’ ;

function addItemstoGallery(selectedOption = ) {

let dataQuery = wixData.query(databaseName);

if (selectedOption.length > 0 ) {
dataQuery = dataQuery.hasSome(databaseField, selectedOption);
}

dataQuery 
    .find() 
    .then(results => {

const filtereditemsReady = results.items;
$w( ‘#gallery1’ ).data = filtereditemsReady;

    })

}

It displays an error in the las line, saying that “data does not exist on ‘#gallery1’”

I’d really appreciate some help on this.