How to add a simple and responsive image gallery to Blogger (4 styles)

This post will show you how to easily add a simple and responsive image gallery to your Blogger/Blogspot blog. Galleries are a great way to display multiple images without making the user scroll through a long slow-loading page. This tutorial will show you how to add an image gallery in a grid layout with rows and columns.

You could use an image gallery to add a portfolio, project gallery, recipe gallery or a visual archive page that links to separate posts on your blog. You could also add a gallery within separate posts to showcase a collection of images such as travel photography, external products, shop this post or lookbook items.

Responsive image gallery for Blogger - 4 styles

How to add a simple and responsive image gallery to Blogger

On Blogger, go to Theme > Edit HTML and find the CSS section of your theme (between <b:skin> and ]]> </b:skin>). You’re going to add the CSS above the closing ]]> </b:skin> tag.

Adding The CSS
Paste the following right above ]]> </b:skin>

/* START SIMPLE RESPONSIVE GALLERY XOMISSE */
.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.gallery img:hover {
	opacity: 0.8;
}

div.desc {
    padding: 10px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

@media only screen and (max-width: 700px){
    .gallery {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .gallery {
        width: 100%;
    }
}

.image-gallery:after {
    content: "";
    display: table;
    clear: both;
}
/* END SIMPLE RESPONSIVE GALLERY XOMISSE */

This styles the images and captions in a grid format, as well as making it responsive (go from 4 columns to 2 columns to 1 column depending on screen size). Customise this CSS as you wish.

Want a 3 column grid instead? Change the width value on .gallery to 33.333% instead.

The HTML
There are four style options depending on if you want a standard image gallery with/without captions or a clickable gallery, with/without captions, that links to other posts, pages or external sites.

Simple image gallery for blogger - 4 styles

To add the gallery to a post, page or gadget, copy and paste the following HTML. It’s important that you make sure you’re pasting it in HTML mode (not compose/rich text mode) and don’t switch between modes once you paste it, otherwise Blogger will add code between the lines and break the structure.

<div class="image-gallery">

  <!-- Grid Image Gallery -->
  <div class="gallery">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
  </div>

  <!-- Grid Image Gallery with Caption -->
  <div class="gallery">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
      <div class="desc">DISPLAYED-CAPTION</div>
  </div>

  <!-- Clickable Grid Image Gallery -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
    </a>
  </div>

  <!-- Clickable Grid Image Gallery with Caption -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
    </a>
    <div class="desc">DISPLAYED-CAPTION</div>
  </div>

</div> 

Now upload your images and replace IMAGE-URL with the direct image URL.

Replace LINK with the post, page or external site you want that image to link to. Replace SEO-IMAGE-CAPTION and DISPLAYED-CAPTION with an SEO friendly descriptive caption.

To add more images, simply copy and paste the block of Grid Image code within the image-gallery div wrapper.

You can now save and publish your post or page. Your image gallery should be displayed in a nice grid and be responsive when you change the browser screen size.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

9 comments

  1. Janeese on

    Wow how interesting. I just have a few questions regrading this tutorial. Will this grid update automatically? Would you be able to use this tutorial to create a grid based page for your blog, one that displays all your blog posts in grid as opposed to a list?

    Reply
    • Elaine Malone on

      Hello! No, it won’t update automatically, it’s meant for showcasing specific images in a gallery. Yes you could use the styling in the post above and instructions from some other posts on mine (like this and this) to show your blog posts in a grid ๐Ÿ™‚

      Reply
      • Jen on

        Hi, I found that mine was doing this too. It was fine on posting, but if I go back to edit the page, Blogger has kindly added in a load of breaks in between the code.

        If you just delete off those extra breaks, it goes back to normal and seems to stay that way…. so its Blogger (surprise surprise) not the code/tutorial.

        I love this, thanks so much for sharing ๐Ÿ˜€ xx

        Reply
        • Elaine Malone on

          Hi Jen. Yes, you need to paste in HTML mode and avoid switching between modes. Otherwise Blogger will add paragraphs and break spaces. Glad to hear that, thank you! Would love to see it if you want to pass on a link ๐Ÿ™‚

          Reply