Exhibits Gallery Filter

The Marriott Default theme includes styling for a homepage exhibit filter.

View Live Example

This layout is accomplished in 4 steps:

Step 1: Add exhibit items inside a container div with class="masonry-with-columns"

 <div class="masonry-with-columns px-5">
 <div class="exhibit-item">
  <div class="card"><a href="{{link to exhibit}}"><img alt="example" class="card-img-top" src="{{link to exhibit image}}" /></a>
   <div class="card-body">
    <h5 class="card-title"><a href="{{link to exhibit}}">Exhibit Name</a></h5>
   </div>
  </div>
 </div>
 <div class="exhibit-item">
  <div class="card"><a href="{{link to exhibit}}"><img alt="example" class="card-img-top" src="{{link to exhibit image}}" /></a>
   <div class="card-body">
    <h5 class="card-title"><a href="{{link to exhibit}}">Exhibit Name</a></h5>
   </div>
  </div>
 </div>
</div>

Step 2: Define filter groups by adding a unique class to the exhibit item container.

<div class="exhibit-item unique-filter-group">
 <div class="card"><a href="{{link to exhibit}}"><img alt="example" class="card-img-top" src="{{link to exhibit image}}" /></a>
  <div class="card-body">
   <h5 class="card-title"><a href="{{link to exhibit}}">Exhibit Name</a></h5>
  </div>
 </div>
</div>

Step 3: Create the filter buttons.

Give the id, value, and for properties the same name used for unique filter classes.

 <div class="text-center toggle-exhibits my-5">
 <p><strong>Filter Exhibits by:</strong>
  <input checked="checked" class="btn-check" id="exhibits-all" name="options" type="radio" value="all">
  <label class="btn" for="exhibits-all">All</label>
  <input class="btn-check" id="unique-filter-group" name="options" type="radio" value="unique-filter-group">
  <label class="btn" for="unique-filter-group">Unique Filter Group</label>
 </p>
</div>

Step 4: Add filter Javascript to page

Since this feature is limited to our main homepage, we decided to include the JavaScript directly on the page rather than incorporating it into the entire theme. To add it, simply create a new HTML block on the top of your page and paste the JavaScript code into the source code.

 <script>
  $(document).ready(function(){

    // Function to toggle exhibit cards
    function toggleExhibits(inputValue) {
      if (inputValue === "all") {
        $(".exhibit-item").fadeIn();
      } else {
        $(".exhibit-item").fadeOut();
        $("." + inputValue).fadeIn();
      }
    }

    // Initial toggle based on URL hash
    var hash = window.location.hash;
    if (hash) {
      $(hash).click();
      window.scrollTo(0, 0);
      event.preventDefault();
    } else {
      toggleExhibits("all");
    }

    // Click event for radio buttons
    $('.toggle-exhibits input[type="radio"]').click(function(){
      var inputValue = $(this).val();
      toggleExhibits(inputValue);
    });

  });
</script>
Prev