Ethos template layout portfolio filter question

[ibaartek]

On this template https://demo.theme.co/gym/ , I’m only able to choose one filter for sorting the image posts,
is it possible to have multiple select filters here?

So that I would end up with few parent categories which have filters in there? for example:

Filter category 1:

• filter child 1
• filter child 2
• filter child 3

Filter category 2:

• filter child 1
• filter child 2
• filter child 3

and I then would be able to choose 1,2 from 1st category and for example 3 from 2nd category,

I also tried doing some custom JS there in order to achieve above but ended up with empty space
around the images that are left after doing the filtering https://i.imgur.com/McARWWF.png

so if above is not possible (setting multiply category filters) in admin panel, can you please let me know which JS function should I call after doing the filtering so that the images can regroup just like in your filter?

Thanks
Bart

[christian]

Hey Bart,

Regretfully, we don’t have a Javascript code for that. But, alternatively, you can try using The Grid plugin which is comes bundled in our theme for free. It has a multiple filter feature. Please visit the links below for more details and plugin usage instructions.

• The Grid: Demos | Bundled Plugin Documentation

Hope that helps.

[ibaartek]

Thanks a lot Christian for your help

[ruenel]

You’re welcome!
We’re glad @Christian were able to help you out.

[ibaartek]

I’ve had a go with the Grid plugin but the issue there is that the filters are on the top of the content and
initially I wanted to have the filters on the sidebar.

Anyway, I managed to figure it out and for anyone looking to update this portfolio filtering to have multiple select with any number of categories here is the JS code along with the video so you can see how it works:

 cat_child.on('click', function () {

    var active_filters = []
    var text = $(this).text();

    // FILTER STYLING

    if($(this).hasClass('cat-selected')){
        $(this).text(text.slice(0,-2));
        $(this).removeClass('cat-selected')
    } else {
        $(this).text(text + ' +');
        $(this).addClass('cat-selected')
    }

    // GET ALL ACTIVE FILTERS

    $.each(cat_child, function (e) {
        if($(this).hasClass('cat-selected')){
            var classList = $(this).attr('class').split(/\s+/);
            var class_slug = '.' + classList[1]
            active_filters.push(class_slug)
        }
    })

    active_filters = active_filters.join('')

    // SEND DATA TO ISOTOPE

    var options = {},
        key     = 'filter',
        value   = active_filters;
    value        = value === 'false' ? false : value;
    options[key] = value;

    $container.xIsotope( options );

});

‘cat_child.on’ is any child category that is being clicked on and to send multiple filters you need to pass a string with class names in options object to xIsotope without any separation

for example: ‘.portfolio-category-one.portfolio-category-two’

I hope it helps,

Thanks
Bart

[lely]

Hi Bart,

Glad you have figure it out and thank you for sharing your solution. Cheers!