How To Create Amazing and Responsive Image Gallery in Blogger


Amazing and Responsive Image Gallery in Blogger

So you are a blogger and have got a new digital camera to capture and share your photos with the online world? But how will you add those images as a gallery in grid and columns to make them look more professional?

Fortunately, I've decided to write an article on how to create an amazing and responsive image gallery in Blogger. Image galleries are a great way to showcase your portfolio as well!

Now the problem is when you upload images on Blogger then all those images will appear one after another and it won't make them look even better. But if you create such image gallery then you can easily show a multiple no. of photos inline with each other.

Image gallery will itself adjust its columns depending upon the screen size. Now before we move on click on the button below to check out the live demo for this responsive image gallery! ( Image gallery belongs to my best buddy! )


Image Gallery Blogger 

Add amazing and responsive image gallery in Blogger:

  • Go to your Blogger account > Theme > Backup Template.
  • Click on Edit HTML   
  • Search for ]]> </b:skin> (Hint: Click anywhere in the code and press CTRL + F for find box to appear! )
  • Now above that tag paste the following CSS code. 
/*Start Responsive Image Gallery TopEarningBoy */


*{box-sizing:border-box;}

.teb-gallery{padding:25px;}

.teb-image{
  padding:5px 5px 0px 5px;
    float: left;
    width: 25%;
}

.teb-image img {
    width: 100%;
    height:160px;
 border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
   
}

.teb-image img:hover{
-webkit-transform: scale(1.1) rotate(-1.5deg) !important;
-moz-transform: scale(1.1) rotate(-1.5deg) !important;
transform: scale(1.1) rotate(-1.5deg) !important;
transition: all .1s ease-out !important;
-webkit-transition: all .1s ease-out !important;
-moz-transition: all .1s ease-out !important;
-o-transition: all .1s ease-out !important;
}

.cap{padding: 3px;
    text-align: center;
font-family:oswald;
  color:#555;
}

@media only screen and (max-width: 700px) {
    .teb-image {
        width: 50%;
        margin: 6px 0px;
    }
}
@media only screen and (max-width: 500px) {
    .teb-image {
        width: 100%;
    }
}
 

/*End Responsive Image Gallery TopEarningBoy */
  
Note: This will make the responsive gallery to automatically adjust its columns from 4 to 2 and then ultimately 1 column depending on the screen size!  

The HTML:

Once you have added the CSS properly in the skin tag then by pasting any of the following codes in the HTML mode of your post, static page or a gadget, you can easily display your image gallery to your users
Don't switch to the compose mode after pasting HTML otherwise code will freak out!

 

Image gallery without caption:

<!--Responsive Image Gallery by TopEarningBoy-->

<div class="teb-gallery">
  <div class="teb-image">

<img src="Image URL" alt="Image ALt-text"/>   

  </div>
 </div> 

 

Image gallery with caption:

<!--Responsive Image Gallery by TopEarningBoy-->

<div class="teb-gallery">
  <div class="teb-image">

<img src="Image URL" alt="Image ALt-text"/>   
<div class="cap">Caption</div>
  
</div>
 </div> 

 

Clickable image gallery without caption:

<!--Responsive Image Gallery by TopEarningBoy-->

<div class="teb-gallery">
  <div class="teb-image">

<a href="Link" target="_blank">

<img src="Image URL" alt="Image ALt-text"/>   

</a>  

</div>
 </div> 

 

Clickable image gallery with caption:

<!--Responsive Image Gallery by TopEarningBoy-->

<div class="teb-gallery">
  <div class="teb-image">

<a href="Link" target="_blank">

<img src="Image URL" alt="Image ALt-text"/>   

</a>  

<div class="cap">Caption</div>

</div>
 </div>
 

 

Customization:

  • To add more images, simply copy and paste the block of teb-image code multiple times within the teb-gallery div wrapper. 
  • By a little bit of maths we can also create a three column grid. How? Divide 100 by 3 that equals 33.33. Replace width:25% with width:33.333%. That simple!
  • Replace height:160px with height:auto if you want the images with their original heights. 
  • Replace Image URL with the URL of your image and Image Alt-text with the SEO alt text of your image.
  • Replace Link with the URL of site you want the image to link to and Caption with the caption of your image.
  • Save your template and you are done!

If you like our tutorials then don't forget to follow us on Facebook and Twitter. We are always active to help and live up to your expectations!

2 comments:

  1. Hi, thanks for the tutorial. Very helpful.The only problem I have is that I want the images to be in a grid format and they just go down. When I try to edit it they just go across passing the page. Is there a way to fix this? Thank you.

    ReplyDelete
    Replies
    1. Hi! If you have read the tutorial carefully and added the code in HTML mode of your post, it would work perfectly fine. Make sure you don't switch to the compose mode after adding the code otherwise Blogger will add paragraphs and break spaces.

      You are always welcome!

      Delete

Powered by Blogger.