This week I had three inquiries about the same thing: How do I create a responsive blogger image gallery?
Each customer wanted to know how they could create a page with an image grid where the images could be linked elsewhere. Links might go to a post category page or an outside link. Or, it could just be used as a simple portfolio or a cool lookbook.
I’ve had this question before and I’ve created something like this for a few clients as a custom job. But the DIY tutorials out there are rare and not very current.
Most of the available tutorials are based on tables (not usually responsive or mobile friendly) or require some code wrangling. So, I decided to set out and design an easy-to-follow tutorial for creating a responsive Blogger image gallery. Here goes…
What do I mean by “responsive blogger image gallery”?
We’re talking about an image grid or gallery with rows and columns of images in a nice grid. Images can be linked or not linked.
An example of an image gallery would be a simple portfolio grid or a lookbook page.
There are many possible uses for a responsive image gallery:
- Category menu to link to category pages
- Visual archive page
- Project gallery to link to project posts
- Recipe archive to link to recipes by type or category
- Simple image gallery
- Gallery of images inside a post – great for travel posts or other multi-image posts
- A shop linked to an outside store, product posts or even add buy buttons!
There are many things you can do with a flexible image gallery script.
While WordPress makes this kind of layout easy to create through special templates like our Lookbook or using any of a myriad of free plugins, the options for Blogger/Blogspot are limited. And often, they cost money to use.
Instead of making you pay a monthly fee to create a simple image gallery, we’re going to show you how to build a simple gallery with linkable (or not) images. The only cost will be a little work copying and pasting some links.
So, here we go:
What We’re Creating
Here’s what we’re going to be creating today.
- It’s a 3 column, 3 row image grid with a caption for each image.
- Each image can be linked to another post, page or even an external link.
You can check out a live version of the gallery here:
The gallery is fully responsive. We use percent widths for the grid so it flexes to fit any screen size and the rows adapt with a few very simple Media Queries to look their best on all screen sizes. Go ahead and resize your browser window to test it, I’ll wait…
This flexibility means this gallery will work on any responsive Blogger template, not just our Blogger Templates. Of course, we think it looks AMAZING on any of our templates, but you really can use it on any Blogger/Blogspot responsive site.
Guys, one of my awesome readers, Pedro, created a really awesome tool to help with the process of editing the gallery code. It’s awesome and saves so much work! Thanks, Pedro!
Check out my post that covers the updated process here: Create a Responsive Image Gallery for Blogger – The Easier Way.
OR carry on reading because you can totally still do this the “old fashioned” way without Pedro’s amazing too. Your choice!
The “Old Fashioned Way”
Step 1: Upload Your Images
You can host your images just about anywhere. For the image gallery, you will need the URL (web address) directly to the image. This is the unique place where the image lives on the web. In addition to being embedded in a page or post, images have their own special, individual URL address.
We’re going to use Blogger to host our images. Some people like to use Flickr or Photobucket but hosting your images locally actually means quicker page load times, which we all know means better SEO.
- In your Blogger Dashboard, create a new page or post. I usually like to use a page. You don’t need to name it or save it or anything.
- In Compose mode, using the Insert image button, add your images for your gallery to the page. You can do this one at a time or make it quicker by uploading and inserting a whole batch. TIP: I would upload the images in the order you want them to appear in the Gallery. This will just make cutting and pasting your links into the code quicker.
- You will see all your images added to the page in a long line down the page.
- Now, switch to HTML mode by clicking on the gray HTML button in the top toolbar.
- You will see the code for all of your images in a long line of gibberish on the page.
- OK, now keep this page open in a tab on your browser. We will come back to grab these image links in a minute.
Step 2: Install the gallery code
- Open a new page or post where you will be inserting your Blogger gallery script. TIP: Create your other content first, then copy and paste the code into the spot where you want it.
- On your computer, cut and paste a copy of our Responsive Blogger Image Gallery by Georgia Lou Studios into a new text file (full code at end of post). IMPORTANT: Open the script using a PLAIN TEXT editor like Note Page, Text Edit, or Sublime Text. DO NOT use a word processing program like Word or Pages.
- The top half of the script is the CSS that give the gallery its styles. I will include some notes on editing this later, but for now, scroll down until you find the line (about line 79) that says Start Gallery HTML & Links
- Each image in the gallery is clearly commented with a start and end comment:
- To edit your first image, you are going to replace the YOUR-LINK-HERE text with the URL (web link) where you want the image to link to. This could be a blog post, a page, or even an outside link. The easiest way to get your URL is to visit the page in another browser tab, then copy and paste the link from the top of your browser. TIP: Don’t edit the quote marks (” “). Some computers will convert the straight quotes to curly quotes and this can sometimes break the code.
- OK, so your first image is now linked to the right place, now you can optionally add an image alt tag and title, good for SEO. Just type your alt and title in between the quotes (” “) where it says ALT-HERE and TITLE-HERE.
- Now we’re ready to add the actual image URL (web link) from Step 1. Go back to your browser tab with the page on your Blogger site where you added all your pictures.
- Each image on the page is contained between an opening div tag and a closing /div tag:
- The blue section above is the full code for the first image. To find the individual image URL (web link) among all this code, look for the a href= tag on the line just below the opening div tag. Now copy that whole long string of letters and numbers between the quotes (” “) after the href=. For instance, on our first image in our example, our first link is: https://3.bp.blogspot.com/-EvyF5pV65Oc/VOJglbmjksI/AAAAAAAAAFE/reOF0ekCY1ITbG6Z3Nalx8-5e81-PAeWACPcB/s1600/photo-1418479631014-8cbf89db3431.jpg
- TIP: We want this link rather than the src= link because this is a larger, higher quality version of the image and will work best with the responsive gallery.
- Now that you’ve copied your first image link, go back to the Responsive Gallery Script code on your computer in your plain text editor.
- In the script for Image 1, where it says YOUR-IMAGE-HERE, paste your image link BETWEEN the quotes (” “). Again, don’t edit the quotes themselves just to be safe.
- Here’s what my code looks like before pasting:
- And after now with the image link:
- Now you can add a caption for your Image 1. Where it says IMAGE CAPTION HERE, just type your image caption between the opening h3 and closing /h3 tags. Don’t edit the > and <.
- OK. You have successfully added your first image with a link, alt tag, title and caption. Now do it again for as many images as you want to add to your gallery.
Step 3: Editing the Code
If your are using less or more than the 9 images we’ve included in the code script then you’re going to want to edit the code.
To Remove Extra Image code
Just highlight and delete the extra lines from the code.
Example, if I only want to have 6 images, I would delete from the line Image 7 Start through Image 9 End. Make sure you remove all the code on those lines.
To Add Extra Images
There is no limit to the number of images you can add. You don’t need to have multiples of 3 (6, 9, 12, etc.). The script will work just fine with 8, 14, or 20 images.
To add an extra image, copy one of the image sections from the Start line through the End line and place it below the Image 9 End line in the open line. You can continue to add as many new image sections as needed, just make sure you place tee code above the ending /ul tag.
Show Sidebar on Page
The code for the gallery is designed to hide the sidebar and create a full-width page (on the gallery page only) for Georgia Lou Studios templates only!
If you are using a template by another designer or you want the sidebar to show on the page or post, remove the section at the top of the script that looks like this:
Step 4: Deploy your code
IMPORTANT: Save a copy of your code. Strange things happen. Don’t do all the copy and pasting work and then lose it all in a freak computer accident. Save often, save always.
- In the page or post where you’re adding your responsive image gallery, make sure you are in HTML mode by clicking the gray HTML button in the top toolbar.
- Copy and paste the ENTIRE script from your file.
- Now Publish your page or post and you’re ready to go.
There you have it, an amazing, simple, fully responsive image gallery for Blogger/Blogspot!
Grab the whole script here:
(To grab the script, just copy it in the window above and drop it into your plain text file on your computer or even right into your Blogger post or page!)
We’d love to see what you’ve created with our script so feel free to leave your links to your projects in the comments!