Isotope with filtering issue

• rachaelrobinson

• January 1, 2018 at 1:43 am

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