Filtering using data-filter

Hi MercerDesign,

Thank you for your post. I've taken a look at the filtering code you have posted and the demo website that you linked. My first suggestion would be to make the new field in the multi-record section be switched to have a type of "list" where you could add your own options and labels. The option value would be the class name that you would want to be able to filter on later, and the label value would be what would display in the list of brands.

Example (note the pipe "|" delimiter between the option and label):

rolex|Rolex
patek|Patek Philippe
...

Then, your code could use a built-in CMS Builder function called "getListOptions", demonstrated below in a code sample. You would swap out "yourTableForBrands" with your section's table name and the "brandFieldName" with the field that has the list options saved for it:

<ul id="portfolio-flters">
  <li data-filter="*" class="filter-active">All</li>
  <?php /* use getListOptions on the table fieldname to get all options available*/ ?>
  <?php foreach (getListOptions('yourTableForBrands', 'brandFieldName') as $value => $label): ?>
    <li data-filter=".<?php echo htmlencode($value); ?>"><?php echo htmlencode($label); ?></li>
  <?php endforeach; ?>
</ul>

...

<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
  <!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
  <?php foreach ($galleryRecords as $record): ?>
    <div class="col-lg-4 col-md-6 portfolio-item <?php echo htmlencode($record['brandFieldName']); // Same field name used to get the list options above ?>">

    ...
    Code you've already got working
    ...

    </div>

  <?php endforeach ?>
</div>

Please let me know if that helps you at all!

Hi, thank you for your reply. I have a different setup for a different site but it is very similar but I cannot get a dropdown list to work. Here is my working code at the minute using a text field to manually put in the filter option in but I need it to work as a dropdown list that my clients can juts choose from. The filter text field below is "category".

<!-- Works Filter -->
<div class="works-filter text-center" role="tablist">
<a href="#" class="filter active" role="tab" aria-selected="true" data-filter="*">All News</a>
<a href="#academic" class="filter" role="tab" aria-selected="false" data-filter=".academic">Academic</a>
<a href="#arts" class="filter" role="tab" aria-selected="false" data-filter=".arts">Arts</a>
<a href="#sport" class="filter" role="tab" aria-selected="false" data-filter=".sport">Sport</a>
<a href="#communities" class="filter" role="tab" aria-selected="false" data-filter=".communities">Communities</a>
<a href="#faith" class="filter" role="tab" aria-selected="false" data-filter=".faith">Faith</a>
</div>
<!-- End Works Filter -->

<!-- Works Grid -->
<section class="section-padding">
<ul class="works-grid work-grid-3 work-grid-gut clearfix hover-white hide-titles" id="work-grid">
<?php foreach ($latest_newsRecords as $record): ?>
<!-- Work Item (Lightbox) -->
<li class="work-item mix <?php echo htmlencode($record['category']) ?>">
<a href="<?php echo htmlencode($record['_link']) ?>" class="work-lightbox-link mfp-image">
<div class="work-img">
<div class="work-img-bg wow-p scalexIn"></div>
<?php foreach ($record['images'] as $index => $upload): ?>
<img class="wow-p fadeIn" data-wow-delay="1s" src="<?php echo htmlencode($upload['urlPath']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="<?php echo htmlencode($upload['info3']) ?>">
<?php endforeach ?>
</div>
<div class="work-intro">
<h3 class="work-title"><?php echo htmlencode($record['title']) ?></h3>
<div class="work-descr">
Find out more
</div>
</div>
</a>
<?php endforeach ?>

<?php if (!$latest_newsRecords): ?>
<?php endif ?>
</li>
<!-- End Work Item -->

</ul>
</section>
<!-- End Works Grid -->

If I do a dropdown list I will call it "News Category" withe options of Academic, Arts, Sport, Communities, Faith.

I hope you cna help.