Filtering using data-filter
4 posts by 2 authors in: Forums > CMS Builder
Last Post: July 16, 2021 (RSS)
Hi, I have a gallery and it uses filtering so if you click on a brand and it shows the images from that brand, I have created a text field for each item in a multi-record but I can't get it to work, I have pasted my original code before I started to mess about with it, I've done it this way because the brands may change so I can't pre populate them. I can get it to work in the list but I don't want the brand list showing up multible times, I jutst want it to show up once. Here is a link of how i wnat it to work: https://www.malcolmgillan.com/NEW-SITE/#gallery
<section id="gallery" class="portfolio section-bg">
<div class="container content-container" data-aos="fade-up">
<div class="section-title">
<h1><a href="#hero"><img src="assets/img/mg-logo-reverse.png" width="478" height="185" alt="Malcolm Gillan Fine Watches and Jewellery"/></a></h1>
<h2>Gallery</h2>
<h3>Watches previously sold by MJ Gillan Ltd:</h3>
</div>
<div class="row">
<div class="col-lg-12 d-flex justify-content-center" data-aos="fade-up" data-aos-delay="100">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">All</li>
<li data-filter=".breitling">Breitling</li>
<li data-filter=".patek">Patek</li>
<li data-filter=".rolex">Philippe Rolex</li>
</ul>
</div>
</div>
<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 patek">
<div class="portfolio-wrap">
<!-- STEP 2a: Display Uploads for field 'thumbnail_image' (Paste this anywhere inside STEP2 to display uploads) -->
<!-- Upload Fields: extension, thumbFilePath, isImage, hasThumbnail, urlPath, width, height, thumbUrlPath, thumbWidth, thumbHeight, info1, info2, info3, info4, info5 -->
<?php foreach ($record['thumbnail_image'] as $index => $upload): ?>
<?php if ($index >= 1) { continue; } // limit uploads shown ?>
<img class="img-fluid" src="<?php echo htmlencode($upload['urlPath']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="<?php echo htmlencode($upload['info1']) ?>">
<?php endforeach ?>
<!-- STEP2a: /Display Uploads -->
<div class="portfolio-info">
<h4><?php echo htmlencode($record['title']) ?></h4>
<div class="portfolio-links">
<a href="<?php echo $record['_link'] ?>" class="portfolio-details-lightbox" data-glightbox="type: external" title="Portfolio Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
</div>
<?php endforeach ?>
<?php if (!$galleryRecords): ?>
<?php endif ?>
<!-- /STEP2: Display Records -->
</div>
</div>
</section>
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):
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!
interactivetools.com
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.
By Jenna - July 16, 2021
Hi MercerDesign,
If you're using Isotope (https://isotope.metafizzy.co) 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: https://jsfiddle.net/desandro/9pSyj/
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; ?>
</select>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.
interactivetools.com