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