How to Design a Filterable Photo Gallery with HTML, CSS, and JavaScript

Creating a filterable photo gallery is an excellent way to showcase images neatly and attractively on your website. In this article, we will explore how you can design a photo gallery using HTML, CSS, and JavaScript, optimizing the content for SEO so that your page can be easily indexed by search engines.

Why Create a Filterable Photo Gallery?

Filterable photo galleries are useful for several reasons:

Improves User Experience: They allow visitors to quickly find images of interest.
Visual Organization: They help keep content organized and appealing.
Optimized for SEO: By using alt text and best practices in HTML structure, you can enhance your site's SEO.

Next, we will outline the steps to create your own filterable gallery.

Step 1: Basic HTML Structure

First, we will start by creating the HTML structure for the gallery. We will use an unordered list to display our images.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galería de Fotos Filtrable</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Filterable Photo Gallery</h1>
    <input type="text" id="searchInput" placeholder="Filter by category...">
    <ul id="gallery" class="gallery">
        <li class="filter-item nature"><img src="https://picsum.photos/id/237/200/300" alt="Naturaleza 1"></li>
        <li class="filter-item nature"><img src="https://picsum.photos/id/32/200/300" alt="Naturaleza 2"></li>
        <li class="filter-item architecture"><img src="https://picsum.photos/id/43/200/300" alt="Arquitectura 1"></li>
        <li class="filter-item architecture"><img src="https://picsum.photos/id/54/200/300" alt="Arquitectura 2"></li>
        <li class="filter-item technology"><img src="https://picsum.photos/id/53/200/300" alt="Tecnología 1"></li>
        <li class="filter-item technology"><img src="https://picsum.photos/id/77/200/300" alt="Tecnología 2"></li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

Explanation of the HTML Code

We use a text <input> so that the user can filter the images by category.
The <ul> list contains several <li> elements where each image is classified with a corresponding class to its category.

Step 2: CSS Styles for the Gallery

Next, we'll add some basic styles using CSS to enhance the appearance of the gallery.

body {
    font-family: Arial, sans-serif;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.filter-item {
    margin: 10px;
}

.filter-item img {
    width: 200px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

Explanation of the CSS Code

We use flexbox to allow the images to be organized in rows and fit the screen size.
We add margins, rounded borders, and shadows to the images for a more appealing style.

Step 3: Functionality with JavaScript

Finally, we'll implement the logic to filter the images using JavaScript.

document.getElementById('searchInput').addEventListener('keyup', function() {
    let filter = this.value.toLowerCase();
    let items = document.querySelectorAll('.filter-item');

    items.forEach(item => {
        if (item.classList.contains(filter) || filter === '') {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
});

Explanation of the JavaScript Code

We listen for the keyup event on the input to detect when the user types.
We filter the gallery items by comparing each item's class with the input value.

SEO Optimization

To optimize your filterable photo gallery for SEO, consider the following tips:

Use of alt Tags

Make sure each image has a descriptive alt attribute. This not only helps with accessibility but is also crucial for SEO, as search engines use this information to index your images.

Friendly URL Structure

If you are using a content management system (CMS), ensure that your image URLs are descriptive and contain relevant keywords.

Reducing Image Size

Optimize images for web before uploading. Use formats like JPEG or WebP, and compress the images to improve site load speed.

Relevant Content

Be sure to include relevant text near the gallery that explains the context of the images and utilizes appropriate keywords for better indexing.

Conclusion

Creating a filterable photo gallery using HTML, CSS, and JavaScript is a straightforward process that can enrich user experience on your website. By following the steps above and applying SEO techniques, you can ensure that your gallery is not only visually appealing but also easily accessible to search engines. Go ahead and implement it to improve your visual content presentation!