Filtering using data-filter

4 posts by 2 authors in: Forums > CMS Builder
Last Post: July 16, 2021   (RSS)

By Jenna - April 28, 2021

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):

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; ?>


<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


  <?php endforeach ?>

Please let me know if that helps you at all!

Jenna Cooke - PHP Programmer

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>
<!-- 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 class="work-intro">
<h3 class="work-title"><?php echo htmlencode($record['title']) ?></h3>
<div class="work-descr">
Find out more
<?php endforeach ?>

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

<!-- 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.

By Jenna - July 16, 2021

Hi MercerDesign,

If you're using Isotope ( for this as well, you'll likely need to write some custom JS for this to tell Isotope to use the <select> options as filters and trigger it on 'change'. See this jsFiddle:

Then you'd use the same code I provided before for the list options, but with a select and options instead.

<select id="work-flters">
  <option data-filter="*" class="filter-active" value="*">All</li>
  <?php foreach (getListOptions('yourTableForWorks', 'category') as $value => $label): ?>
    <option data-filter=".<?php echo htmlencode($value); ?>" value=".<?php echo htmlencode($value); ?>"><?php echo htmlencode($label); ?></option>
  <?php endforeach; ?>

You will need to customize the code above using your table name and you may not need the "data-filter" attributes because you'd be writing Javascript (check out that JS Fiddle) to tell the browser that you're filtering on the change of the select "#work-filters" and use the value as the isotope filter value.

I think the link I found with a simple Google search will help in this case as I don't believe it's in Isotope's base functionality to use a select versus another HTML element.

Please let me know if this helps at all.

Jenna Cooke - PHP Programmer