An image filter gallery is a popular design element used on many modern websites to showcase a collection of images. It allows users to filter images based on specific categories. A responsive image filter gallery, on the other hand, is a gallery that adjusts its size and layout based on the screen size, making it accessible on all devices. In this article, we will guide you on how to create a responsive image filter gallery using Bootstrap and JavaScript.
Step 1: Create the HTML Markup
The first step is to create the HTML markup for the image filter gallery. You can use the div tag with a unique class or ID to group the images to be displayed. Each image can be represented by a div with its unique class or ID. You can add images and any other content inside each image div.
<!DOCTYPE html>
<!-- By Mr. Geek - www.wphotshot.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Image Gallery with Filter | WPHotshot</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css">
<script src="main.js" defer></script>
</head>
<body>
<div class="container">
<!-- img Filter Buttons Section -->
<div class="row mt-5" id="filter-buttons">
<div class="col-12">
<button class="btn mb-2 me-1 active" data-filter="all">Show all</button>
<button class="btn mb-2 mx-1" data-filter="nature">Nature</button>
<button class="btn mb-2 mx-1" data-filter="cars">Cars</button>
<button class="btn mb-2 mx-1" data-filter="people">People</button>
</div>
</div>
<!-- Filterable img / Cards Section -->
<div class="row px-2 mt-4 gap-3" id="filterable-cards">
<div class="card p-0" data-name="nature">
<img decoding="async" src="img/nature-1.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Nature 1</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="nature">
<img decoding="async" src="img/nature-2.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Nature 2</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="nature">
<img decoding="async" src="img/nature-3.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Nature 3</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="cars">
<img decoding="async" src="img/car-1.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Car 1</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="cars">
<img decoding="async" src="img/car-2.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Car 2</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="cars">
<img decoding="async" src="img/car-3.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Car 3</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="people">
<img decoding="async" src="img/1.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">People 1</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="people">
<img decoding="async" src="img/2.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">People 2</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
</div>
</div>
</body>
</html>
Step 2: Add Bootstrap Styling
Next, you can add Bootstrap styling to the image filter gallery to make it responsive. You can use Bootstrap’s grid system to create a layout that adjusts based on the screen size. You can also use Bootstrap’s built-in classes, such as img-fluid and card, to style the images and their containers.
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
font-family: "Poppins", sans-serif;
}
body {
background: linear-gradient(to right, #2832d4, #00A5B2, #7209D4);
}
body .container {
max-width: 1100px;
}
#filter-buttons button {
border-radius: 3px;
background: #2832d4;
border-color: transparent;
color: #fff;
}
#filter-buttons button:hover {
background: #00A5B2;
}
#filter-buttons button.active {
color: #fff;
background: #00A5B2;
}
#filterable-cards .card {
width: 15rem;
border: 2px solid transparent;
}
#filterable-cards .card.hide {
display: none;
}
@media (max-width: 600px) {
#filterable-cards {
justify-content: center;
}
#filterable-cards .card {
width: calc(100% / 2 - 10px);
}
}
.card img{
border-radius: 5px 5px 0 0;
}
Step 3: Implement JavaScript Filter Logic
The most crucial step in creating an image filter gallery is implementing the JavaScript filter logic. You can use JavaScript to create a function that will filter the images based on specific categories. You can do this by adding event listeners to the filter buttons and using JavaScript’s built-in filter method to show or hide images based on their categories.
// Select relevant HTML elements
const filterButtons = document.querySelectorAll("#filter-buttons button");
const filterableCards = document.querySelectorAll("#filterable-cards .card");
// Function to filter cards based on filter buttons
const filterCards = (e) => {
document.querySelector("#filter-buttons .active").classList.remove("active");
e.target.classList.add("active");
filterableCards.forEach(card => {
// show the card if it matches the clicked filter or show all cards if "all" filter is clicked
if(card.dataset.name === e.target.dataset.filter || e.target.dataset.filter === "all") {
return card.classList.replace("hide", "show");
}
card.classList.add("hide");
});
}
filterButtons.forEach(button => button.addEventListener("click", filterCards));
Conclusion
In conclusion, an image filter gallery is a powerful design element that can make your website more engaging and interactive. By following the steps above, you can create a responsive image filter gallery using Bootstrap and JavaScript that will showcase your images in a visually appealing and interactive way. Remember to test your code thoroughly to ensure that it works as intended. Implementing an image filter gallery on your website can improve user engagement and ultimately lead to higher conversion rates.
