How to Create a Responsive Image Gallery in Blogger
Do you want to add an image gallery to your Blogger website and make it responsive so that it loads properly on Desktop, Tablet, and mobile?
Well, follow the Article, To Learn How to create a Responsive image gallery in Blogger Website using HTML & CSS.
This image gallery is fully responsive and Displays 2 images on a single row for large devices and automatically shows 1 image on a single row for Mobile devices.
You can see the Desktop view of the Image gallery below
You can see the Mobile view of the Image gallery below.
First of all, You need to upload your images and grab the Source URLs of those images.
Save the links somewhere so that you can use them in the image gallery code below.
Then open the Post or page editor in HTML view where you want to add the image gallery.
Now you need to copy and Paste the below code in your post editor.
<div class="gallery">
<div class="gallery-item">
<img alt="Image 1" src="https://images.pexels.com/photos/733856/pexels-photo-733856.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</div>
<div class="gallery-item">
<img alt="Image 2" src="https://images.pexels.com/photos/5052875/pexels-photo-5052875.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</div>
<div class="gallery-item">
<img alt="Image 3" src="https://images.pexels.com/photos/4240606/pexels-photo-4240606.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</div>
<div class="gallery-item">
<img alt="Image 4" src="https://images.pexels.com/photos/6469/red-hands-woman-creative.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</div>
<div class="gallery-item">
<img alt="Image 5" src="https://images.pexels.com/photos/4240545/pexels-photo-4240545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</div>
<div class="gallery-item">
<img alt="Image 6" src="https://images.pexels.com/photos/7964660/pexels-photo-7964660.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</div>
<!--Add more gallery items as needed-->
</div>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
padding: 16px;
}
.gallery-item {
overflow: hidden;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.gallery-item img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
</style>
Now you need to replace the Image Source URLs of your own image and publish the page.
You have successfully added an Image Gallery to Your Blogger website.
This code creates a basic responsive image gallery using CSS Grid. The grid-template-columns property is used to create a flexible grid layout, and the minmax(250px, 1fr) ensures that each column is at least 250 pixels wide but can expand if there is extra space available.
Feel free to customize the HTML by adding more div elements with the class gallery-item for additional images.
Advanced Image Gallery with Lightbox Functionality
If you want to add an image lightbox to your gallery, that displays a larger version of the clicked image, then follow the below steps.
Here, the user can easily click on the image, expand it to open in a lightbox, and check out the rest of the images with a larger view.
It will improve the user experience on the website and if you are running an image website then you should enable this functionality.
Just use the code below to enable Image Gallery with Lightbox on the Blogger website.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
padding: 16px;
}
.gallery-item {
overflow: hidden;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.gallery-item img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
}
.overlay img {
max-width: 90%;
max-height: 90%;
border-radius: 8px;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: #fff;
font-size: 24px;
}
</style>
<div class="gallery" id="image-gallery">
<a href="https://images.pexels.com/photos/733856/pexels-photo-733856.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 1">
<img class="gallery-item" alt="Image 1" src="https://images.pexels.com/photos/733856/pexels-photo-733856.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</a>
<a href="https://images.pexels.com/photos/5052875/pexels-photo-5052875.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 2">
<img class="gallery-item" alt="Image 2" src="https://images.pexels.com/photos/5052875/pexels-photo-5052875.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</a>
<a href="https://images.pexels.com/photos/4240606/pexels-photo-4240606.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 3">
<img class="gallery-item" alt="Image 3" src="https://images.pexels.com/photos/4240606/pexels-photo-4240606.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</a>
<a href="https://images.pexels.com/photos/6469/red-hands-woman-creative.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 4">
<img class="gallery-item" alt="Image 4" src="https://images.pexels.com/photos/6469/red-hands-woman-creative.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</a>
<a href="https://images.pexels.com/photos/4240545/pexels-photo-4240545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 5">
<img class="gallery-item" alt="Image 5" src="https://images.pexels.com/photos/4240545/pexels-photo-4240545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</a>
<a href="https://images.pexels.com/photos/7964660/pexels-photo-7964660.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" data-lightbox="image-set" data-title="Image 6">
<img class="gallery-item" alt="Image 6" src="https://images.pexels.com/photos/7964660/pexels-photo-7964660.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</a>
<!-- Add more gallery items as needed -->
</div>
<div class="overlay" id="overlay">
<span class="close-btn" id="close-btn">×</span>
<img id="overlay-img" class="overlay-img">
</div>
Here, we are using the Lightbox script to open an image in a lightbox. if you are concerned about slow loading speed after using this lightbox then you can delay the script loading by using the below code instead of the original one.
<script>
// Add a 3-second delay to the lightbox script
setTimeout(function() {
var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js';
document.body.appendChild(script);
}, 3000);
</script>
Conclusion
I hope you have learned how to create a Responsive image gallery on the Blogger website. if you have any doubts, do let me know in the comment section.
If you this article then subscribe to our YouTube channel.
Article written by
Subarna Basnet
Subarna Basnet is a writer, programmer, and mathematician.