Filtering using data-filter

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

By MercerDesign - April 15, 2021

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 MercerDesign - July 14, 2021

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.

Jenna Cooke - PHP Programmer
interactivetools.com