Modern Responsive Image Gallery for Blogger

Struggling with Blogger's default image layout? Stacking images one by one forces users to scroll endlessly, creating a poor user experience and a less-than-professional look. To truly improve your blog's visual appeal, you need a better way to display your galleries.

Elevate your blog's visual appeal with this powerful image gallery toolkit. This guide provides three distinct, responsive image gallery layouts designed specifically for Blogger, built with pure, efficient CSS and JavaScript. This isn't just one style; it's a complete toolkit for creating stunning, modern image displays.

You'll learn how to add a responsive image gallery to Blogger that's both lightweight and packed with features: a full-width Image Carousel, a mobile-friendly Swipe Gallery, and a "smart" Grid Layout with an automatic "Show All" button. All three designs include a beautiful lightbox modal popup for a professional touch.

Table of Contents

Overview of Our Responsive Gallery Layouts

This new collection includes three major layouts:

1. Image Carousel: A full-width, modern slider. Users can scroll horizontally to see each image.
2. Swipe Gallery: Perfect for mobile. This creates a "filmstrip" style gallery that users can swipe through. It includes styles for both landscape and portrait (vertical) images.
3. Grid Layout Gallery: A clean, 2-column grid. If you add more than 4 images, the script automatically adds a "Show All" button to expand the gallery.

---

How to Install These Image Galleries on Blogger

Adding these stylish, mobile-friendly galleries to your Blogger blog is simple. Just follow these steps carefully.

Warning! Before editing your theme's XML, we strongly recommend you create a backup of your current theme. This ensures you can easily restore it if anything goes wrong.

Install the CSS (One-Time Setup)

This CSS code styles all three gallery types, the modal popup, and the code highlighting labels.

1. Go to your Blogger Dashboard > Theme.
2. Click the drop-down arrow and select Edit HTML.
3. Inside the theme editor, find the </head> tag.
4. Copy the <style> code below and paste it right above the </head> tag.

<style>
/*<![CDATA[*//*--[codehubly Advanced Image Galleries CSS ]--*/
.image-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);justify-content:center;align-items:center;z-index:9999}
.image-modal.is-visible{display:flex}
.image-modal img{max-width:90%;max-height:90%;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,0.5)}
.image-modal .modal-close-btn{position:absolute;top:20px;right:25px;font-size:28px;color:#fff;cursor:pointer;background:rgba(0,0,0,0.6);padding:6px 12px;border-radius:50%;line-height:1}
.image-modal .modal-close-btn:hover{background:rgba(255,255,255,0.3)}
.media-container{margin:25px 0;position:relative;width:100%;overflow:hidden}
.media-container img{width:100%;height:auto;border-radius:10px;display:block;object-fit:cover}
.media-container .image-caption{font-size:14px;color:#666;text-align:center;margin-top:8px}
.media-container.image-carousel{overflow:hidden;border-radius:12px}
.media-container.image-carousel .carousel-content{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;scroll-behavior:smooth;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.media-container.image-carousel .carousel-content img{flex:0 0 100%;scroll-snap-align:start;border-radius:12px;transition:transform .3s ease}
.media-container.image-carousel .carousel-content img:hover{transform:scale(1.02)}
.media-container.swipe-gallery{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;border-radius:12px}
.media-container.swipe-gallery .swipe-content{display:inline-flex;gap:10px}
.media-container.swipe-gallery .swipe-content img{width:180px;height:auto;border-radius:10px;display:inline-block;object-fit:cover;transition:transform .3s ease}
.media-container.swipe-gallery .swipe-content img:hover{transform:scale(1.05)}
.media-container.swipe-gallery.vertical-aspect .swipe-content img{width:130px}
.media-container.grid-layout .grid-content{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.media-container.grid-layout .grid-content img{border-radius:10px;object-fit:cover;width:100%;height:auto}
.media-container.grid-layout .grid-content img:nth-child(n+5){display:none}
.media-container.grid-layout.show-more-images .grid-content img{display:block}
.media-container.grid-layout .view-all-btn{display:block;text-align:center;margin-top:10px;font-size:14px;font-weight:600;color:#007bff;cursor:pointer}
.media-container.grid-layout .view-all-btn:hover{text-decoration:underline}
.media-container.image-carousel .carousel-content::-webkit-scrollbar,.media-container.swipe-gallery::-webkit-scrollbar{height:6px}
.media-container.image-carousel .carousel-content::-webkit-scrollbar-thumb,.media-container.swipe-gallery::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}
.media-container.image-carousel .carousel-content::-webkit-scrollbar-thumb:hover,.media-container.swipe-gallery::-webkit-scrollbar-thumb:hover{background:#999}
*,*:before,*:after{box-sizing:border-box}
.media-container,.media-container *{max-width:100%!important}
/*]]>*/
</style>

Install the JavaScript (One-Time Setup)

This JavaScript code is required for the modal popup and the "Show All" grid functionality to work.

1. In the theme editor, find the </body> tag (it will be at the very bottom).
2. Copy the entire <script> code below and paste it right above the </body> tag.

<script>
//<![CDATA[ 
document.addEventListener("DOMContentLoaded",()=>{ const imgs=document.querySelectorAll('.media-container img'); const popup=document.createElement('div'); popup.className='image-modal'; popup.innerHTML=`<span class="modal-close-btn">×</span><img id="modalImage" src="" alt="popup">`; document.body.appendChild(popup); imgs.forEach(img=>{ img.addEventListener('click',()=>{ document.getElementById('modalImage').src=img.src; popup.classList.add('is-visible'); }); }); popup.addEventListener('click',e=>{ if(e.target.classList.contains('modal-close-btn')||e.target===popup){ popup.classList.remove('is-visible'); } }); const gridContainer=document.querySelector('.media-container.grid-layout'); if(gridContainer){ const gridImages=gridContainer.querySelectorAll('.grid-content img'); const showAllButton=gridContainer.querySelector('.view-all-btn'); const totalImages=gridImages.length; if(totalImages>4){ showAllButton.textContent=`Show all ${totalImages} images`; }else{ showAllButton.style.display='none'; } } }); function toggleGridVisibility(button){ const gallery=button.closest('.media-container.grid-layout'); gallery.classList.toggle('show-more-images'); const totalImages=gallery.querySelectorAll('.grid-content img').length; if(gallery.classList.contains('show-more-images')){ button.textContent=`Show less (4 images)`; }else{ button.textContent=`Show all ${totalImages} images`; } } 
//]]>
</script> 

1. Click the Save icon in the top-right corner.

That's it! All the necessary code is now installed on your blog.

---

How to Add the Image Galleries to Your Blogger Posts

Now that the CSS and JS are installed, you can easily add these galleries to your posts.

1. Create a new post or edit an existing one.
2. In the post editor, switch from "Compose view" to "HTML view" by clicking the </> icon.
3. Find the HTML code below for the design you want and paste it into your post.
4. Replace the highlighted image-url placeholders with your own image URLs and edit the alt text.

Here are the HTML codes for all three designs:

Image Carousel (Full-Width Slider)

Use this for a full-width gallery where each image takes up the full space. Users scroll horizontally to navigate.

<!--[ Image Carousel ]-->
<div class="media-container image-carousel">
<div class="carousel-content">
<img alt="Image 1" src="image-url"/>
<img alt="Image 2" src="image-url"/>
<img alt="Image 3" src="image-url"/>
<img alt="Image 4" src="image-url"/>
</div>
<div class="image-caption">Optional caption for the carousel.</div>
</div>

Image Swipe Gallery (Mobile-Friendly Filmstrip)

Use this to show a "filmstrip" of images that users can swipe. This is excellent for mobile. Add the class vertical-aspect for portrait-style (taller) images.

<!--[ Swipe Gallery (Landscape) ]-->
<div class="media-container swipe-gallery">
<div class="swipe-content">
<img alt="Image 1" src="image-url"/>
<img alt="Image 2" src="image-url"/>
<img alt="Image 3" src="image-url"/>
<img alt="Image 4" src="image-url"/>
</div>
<div class="image-caption">Optional caption for the swipe gallery.</div>
</div>

Second Style

<!--[ Swipe Gallery (Vertical) ]-->
<div class="media-container swipe-gallery vertical-aspect">
<div class="swipe-content">
<img alt="Image 1" src="image-url"/>
<img alt="Image 2" src="image-url"/>
<img alt="Image 3" src="image-url"/>
<img alt="Image 4" src="image-url"/>
</div>
<div class="image-caption">Optional caption for the vertical swipe gallery.</div>
</div>

Smart Grid Layout (with "Show All")

Use this for a clean 2-column grid. The JavaScript will automatically add a "Show All" button if you include more than 4 images.

<!--[ Grid Layout Gallery ]-->
<div class="media-container grid-layout">
<div class="grid-content">
<img alt="Image 1" src="image-url"/>
<img alt="Image 2" src="image-url"/>
<img alt="Image 3" src="image-url"/>
<img alt="Image 4" src="image-url"/>
<!-- Add more images here to activate the "Show All" button -->
<img alt="Image 5" src="image-url"/>
<img alt="Image 6" src="image-url"/>
</div>
<div class="view-all-btn" onclick="toggleGridVisibility(this)">Show all 6 images</div>
<div class="image-caption">Optional caption for the grid layout.</div>
</div>

---

Key Features & Benefits

• 3-in-1 Toolkit: Get a Blogger image carousel, swipe gallery, and smart grid all with one installation.
• Built-in Lightbox Popup: Click any image in any gallery, and it opens in a beautiful, full-screen modal popup.
• "Smart" Grid Logic: The JavaScript automatically detects if there are more than 4 images in a grid and adds a "Show All" button, even counting the images for you.
• Fully Responsive Design: All gallery types look fantastic and work perfectly on both mobile and desktop, improving mobile UX.
• Lightweight & Fast: No jQuery or heavy libraries. Just pure, modern CSS and JavaScript that won't slow down your Blogger site speed.
• Easy to Use: Just one-time setup and then copy-paste simple HTML snippets into your posts.

---

Frequently Asked Questions (FAQ)

Are these galleries responsive on mobile?

Yes! All three gallery types are designed to be fully responsive and work perfectly on mobile devices. The Blogger swipe gallery is especially useful for mobile users.

How does the "Show All" button work?

The JavaScript automatically counts the number of <img> tags inside your .grid-content. If it finds 4 or fewer, it hides the button. If it finds 5 or more, it shows the button and automatically updates the text (e.g., "Show all 6 images").

Can I use multiple galleries on the same page?

Yes! You can use as many carousels, swipe galleries, and grids as you want on a single post or page. They will all work independently, including the lightbox popup.

Do I need to edit the JavaScript to use the "Show All" button?

No. The JavaScript is fully automatic. You just need to paste the HTML for the Grid Layout. The script will handle the rest, including hiding/showing the button and changing the text.

---

Related Posts

Final Thoughts

Stop settling for Blogger's default image layout. By integrating these responsive CSS and JS image galleries, you'll instantly make your blog look more professional and significantly improve your user experience (UX).

These lightweight, easy-to-install tools give you the control to create engaging, modern layouts that keep readers on your site longer. Upgrading your blog's visual appeal has never been easier.