Use PHP to generate filter portfolio

Overview

Filter Portfolio can be very useful for websites, especially when there is a lot of images you want to show to users. It is always nice to keep it into different categories and allow your user to play with them.

But adding a tag and a div on hundreds of images is definitely not fun. Our goal today is to use PHP to generate the Filter Portfolio instead of manually adding them one by one.

The logic is like this, first we have a folder to contain all the portfolio images. It could be like this:

“assets->img->logos->businesses”

And in the “businesses” folder, we have some sub-folders to put all the images in different categories, like this:
folder-structure

 

Each sub-folder contains different images in that category, and our goal is to use those sub-folders name as the filters, and the images under each category will be added automatically. Lets do it.

  • First we need to implement a filter portfolio.

I know people hate this, but we are going to use a little pre-built javascript file called MixitUp, I promise it is a very easy but powerful tool to use, see a demo here.

There is already very comprehensive tutorial on how to install that plugin  in their github repository, you can follow either of these.

  1. Download the javascript file from github

Click this link git -> src to open the repository for the javascript file, download and save it in your asset folder.

  1. Import js and css

You can do this right before the closing body tag. You probably have Jquery installed already, but just in case you don’t.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.mixitup.js"></script>

It is recommended to link your Mixitup function while your document is ready, so add this after the importing lines.

 <script type="text/javascript">
           $(document).ready(function(){
             jQuery(function(){
                $(function() {
                  $('#Container').mixItUp();
                });
             });
         });
    </script>
  1. Add the code

Here is where the fun begins! I am not going to do any stylings in this tutorial, since you can always customize it yourself. Okay, first of first, add a div as a container of your filter portfolio section, so:

<div></div>

Next, we need to add those clickable filter buttons to the div we just created. We can add them programmatically, but to be honest, it is not that bad to do it manually.

<a data-filter="all"> All </a>
<a data-filter=".Eateries"> Eateries </a>
<a data-filter=".Cafes"> Cafes </a>
<a data-filter=".Bars_Clubs_Lounges"> Bars, Clubs <span>&</span> Lounges </a>
<a data-filter=".Lifestyle"> Lifestyle </a>
<br />
<a data-filter=".Health_Fitness"> Health <span>&</span> Fitness </a>
<a data-filter=".Fashion"> Fashion </a>
<a data-filter=".Beauty_Spas"> Beauty <span>&</span> Spas </a>
<a data-filter=".Entertainment"> Entertainment </a>

Please note, for these <a> tags, you need to follow the patterns of MixitUp. Basically in class attribute you need to specify “filter” for it, and in data-filter, you need to tell which category it is. Next we are going to write some PHP code, to iterate through the destination folder, and process the files within it.

 <div id="Container">
                        <?php
                        /**
                         * Iterate through the specified folder, and show images with filter
                         */
                        $businesses_logo_dir = "assets/img/logos/businesses/";
                        $dir = getcwd()."/assets/img/logos/businesses/";
                        $it = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($dir));

                        while($it->valid()) {

                            if (!$it->isDot()) {

                                $subject = $it->getSubPathName();
                                // Mac OS automatically creates .DS_store file to store metadata
                                // The following regex is used to ignore those files
                                $pattern = '/\\.DS/';
                                preg_match( $pattern, $subject, $match );
                                if( !$match ) {
                                    $file_path_name = str_replace("\\", "/", $subject);
                                ?>
                                    <div class="mix <?php echo $it->getSubPath(); ?> col-md-3 ">
                                        <img src="<?php echo $businesses_logo_dir.$file_path_name;?>" alt="<?php echo $file_path_name;?>" class="business-logo-img"/>
                                    </div>
                                    
                                <?php
                                }
                            }

                            $it->next();
                        }
                        ?>
           </div>

The code is pretty straightforward, just want to label out a couple of things.

First, we specified which folders we are working with and then we used a built-in recursive iterators to cycle through the folder.

For each item we found in every sub-folder, $it->getSubPath will return the sub-folder name and $it->getSubPathName will return the name of the file. Create a div for each image, and play with those returned parameters to fit them into the pattern of MixitUp.

The $it->isDot() function and regular expressions are used to filter out some system hidden files such as “.DS_Store” and others, since we do not want to them to be shown as images.

Easy, right? If you like this post, click share and help people who’s having this kind of issue.

Lucius Yu

About 

Lucius is a Software Developer at LoginRadius. He was born and raised in China, but came to Edmonton to graduate from the University of Alberta, double majoring in Computer Sciences and Mathematics. Besides coding, which is his real passion, he enjoys playing ping pong and swimming.