Support

Account

Home Forums Front-end Issues Isotope with filtering issue

Unread

Isotope with filtering issue

  • Hi there. I’m using ACF with repeater field, plus the JS Isotope to filter pictures based on 2 attributes.

    Customers can filter photos either by Colour or Type. Both are added to the page using ACF repeater field in the same page.

    Filter by event: (radio)

    <div class="ui-group">
                <h3 class="ui-group__title">Filter by event</h3>
                <div class="filters button-group js-radio-button-group">
                   <button class="button is-checked" data-filter="*">show all</button>
                   <?php if( have_rows('new_guestbook') ): ?>
                   <?php while( have_rows('new_guestbook') ): the_row(); ?>
                   <button class="button" data-filter=".<?php the_sub_field('filter_by_event'); ?>"><?php the_sub_field('filter_by_event'); ?></button>
                   <?php ?> 
                   <?php endwhile; ?>
                   <?php endif; ?>
                </div>
             </div>
    
    Filter by colour: (checkbox)
    
             <div class="ui-group">
                <h3 class="ui-group__title">Filter by colour</h3>
                <div class="filters button-group js-radio-button-group">
                   <button class="button is-checked" data-filter="*">show all</button>
                   <?php if( have_rows('new_guestbook') ): ?>
                   <?php while( have_rows('new_guestbook') ): the_row(); ?>
                   <button class="button" data-filter=".<?php the_sub_field('filter_by_colour'); ?>"><?php the_sub_field('filter_by_colour'); ?></button>
                   <?php ?> 
                   <?php endwhile; ?>
                   <?php endif; ?>
                </div>
             </div>

    My issue is if I select more than 1 photo with the same attribute, it appears twice in the filter list. I only want it to show once. Here’s the page so you can see what I mean: https://ahoydesigns.co.uk/choose-your-guestbook/ As you can see, filter by event ‘wedding’ is showing x3, and below LIlac is showing x2.

    Can anyone help? I’m at a loss what to do – other than display them all manually in the code.

    Many thanks in advance, Rachael

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.