Refactor - Basic Portfolio Filtering System

index.html

<main>
  <section id="controls">
    <ul class="filter-controls">
      <li class="active"data-category="">All</li>
      <li data-category="landscape">Landscape</li>
      <li data-category="urban">Urban</li>
      <li data-category="portrait">Portrait</li>
    </ul>
  </section>
  <div class="grid-wrapper">
    <img class="image" data-category="landscape" src="https://unsplash.it/600?image=961">
    <img class="image" data-category="urban" src="https://unsplash.it/600?image=1075">
    <img class="image" data-category="urban" src="https://unsplash.it/600?image=1067">
    <img class="image" data-category="portrait" src="https://unsplash.it/600?image=978">
    <img class="image" data-category="urban" src="https://unsplash.it/600?image=1033">
    <img class="image" data-category="portrait" src="https://unsplash.it/600?image=996">
    <img class="image" data-category="urban" src="https://unsplash.it/600?image=983">
    <img class="image" data-category="landscape" src="https://unsplash.it/600?image=916">
    <img class="image" data-category="portrait" src="https://unsplash.it/600?image=1027">
    <img class="image" data-category="landscape" src="https://unsplash.it/600?image=901">
    <img class="image" data-category="landscape" src="https://unsplash.it/600?image=876">
    <img class="image" data-category="portrait" src="https://unsplash.it/600?image=838">
  </div>
</main>

<p>See revisions at: <a target="_blank" href="https://gist.github.com/thinsoldier/7d7152216d848d6894a18299c64aab9e">https://gist.github.com/thinsoldier/7d7152216d848d6894a18299c64aab9e</a></p>

refactor-basic-portfolio-filtering-system.markdown

Refactor - Basic Portfolio Filtering System

I didn't like the original (https://codepen.io/brianhaferkamp/post/create-a-basic-filtering-system) so decided to refactor (https://gist.github.com/thinsoldier/7d7152216d848d6894a18299c64aab9e/revisions?diff=split).

---

This is a very simple filtering system using jQuery class switching. It could also be done with vanilla JavaScript. The grid is created using CSS Grid Layout. This filter is a good starting place to do some cool things.

I often need just a basic filter for portfolios or categories and it's nearly impossible to find a plugin that just works. So I created one. Feel free to use it in your projects.

Update: This is fully responsive now. I fixed some of the issues with scrolling and padding.

A Pen by thinsoldier on CodePen.

License.

script.js

// https://codepen.io/brianhaferkamp/post/create-a-basic-filtering-system

$('.filter-controls [data-category]').on('click', function(){
  var $element = $(this);
  var categoryClass = $element.data().category;
  var selectorText = '';
  
  if( categoryClass.length > 0)
  {
    selectorText = '*='+categoryClass;
  }

  // Update active filter button
  $('.filter-controls li').removeClass('active');
  $element.addClass('active');
  
  // Update visible images
  $('.image').addClass('hide');
  $(`.image[data-category${selectorText}]`).removeClass('hide');
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

/*
The .hide fadeOut keyframes seem to have no effect in Firefox or Chrome or Safari so I removed them.
  
Switched to grid auto-fill to reduce the number of media queries.

Removed repetitive background-* css.

Sass wouldn't let me use "object-fit: contain" so switched to plain css.

Replaced background images with actual image tags. Makes it easier to use @srcset for responsive images. (I don't know anything about responsive background-images yet.)

Used 600px wide images instead of 1500 since none will ever be seen at a size greater than 300-600.

Used data attributes and attribute selectors to remove a bunch of repetitive JS and classes

I really wish making git commits or revisions of some kind was baked directly into codepen. I strongly prefer jsbin just for that 1 feature.
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.hide {
  display: none;
}

#controls {
  margin-bottom: 2rem;
}
#controls ul {
  list-style: none;
  padding: 1rem;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#controls ul li {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid #eee;
  cursor: pointer;
}
#controls ul li:hover {
  background: #eee;
}
@media (min-width: 400px) {
  #controls ul li {
    margin-right: 1rem;
    padding: 1rem;
  }
}
#controls ul .active {
  background: #444;
  color: white;
}
#controls ul .active:hover {
  color: #444;
}

.grid-wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(320px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  grid-gap: 1rem;
  -ms-grid-column-align: center;
      justify-items: center;
  margin: 1rem;
}

.image {
  width: 100%;
  height: 50vh;
  object-fit: cover;
}

@media (min-width: 500px) {
  .image {
    width: 100%;
    height: 50vw;
  }
}
@media (min-width: 768px) {
  .image {
    width: 100%;
    height: 40vw;
  }
}
@media (min-width: 1210px) {
  .image {
    width: 100%;
    height: 20vw;
  }
}