Add a Project Gallery to your Blog

One of the first things I did when I designed my blog was add a project gallery. It gives new visitors a place to see my project posts all at once, and all they have to do is click on a photo and it takes them directly to that post page.

I also find it helpful to see photos of all of my projects on one page. It’s fun to remind myself of the projects that I’ve done.

This tutorial is for blogger only. I’m not sure if it would work on other platforms.

 

how-to-add-a-gallery-to-your-blog

So, for those of you who don’t have a project gallery on your blog and would like one, here’s how I did it. You don’t need to be an expert in HTML at all. It’s just about putting the right information into the right places.

Unfortunately, I have no idea where I got this code. I did so much reading and research before I started my blog that now it’s all kind of a blur. I did adapt the original code that I found to suit my purposes. Please keep in mind that my blog is on Blogger so I have no idea if this will work on WordPress etc…

So here’s the code.

<center>
<table><tbody>
<tr>

<td><table align=”center” cellpadding=”0″ cellspacing=”0″ class=”tr-caption-container” style=”margin-left: auto; margin-right: auto; text-align: center;”><tbody>
<tr><td style=”text-align: center;”><a href=”http://www.Project Blog Address Here.html” style=”margin-left: auto; margin-right: auto;” target=”_blank”><img alt=”project-name-for-SEO-purposes-here” border=”0″ src=”http://www.Photo Code Here.jpg” width=”180” /></a></td></tr>
<tr><td class=”tr-caption” style=”text-align: center;”>Project Title Here</td></tr>
</tbody></table>
</td>

<td><table align=”center” cellpadding=”0″ cellspacing=”0″ class=”tr-caption-container” style=”margin-left: auto; margin-right: auto; text-align: center;”><tbody>
<tr><td style=”text-align: center;”><a href=”http://www.Project Blog Address Here.html” style=”margin-left: auto; margin-right: auto;” target=”_blank”><img alt=”project-name-for-SEO-purposes-here” border=”0″ src=”http://www.Photo Code Here.jpg” width=”180” /></a></td></tr>
<tr><td class=”tr-caption” style=”text-align: center;”>Project Title Here</td></tr>
</tbody></table>
</td>

<td><table align=”center” cellpadding=”0″ cellspacing=”0″ class=”tr-caption-container” style=”margin-left: auto; margin-right: auto; text-align: center;”><tbody>
<tr><td style=”text-align: center;”><a href=”http://www.Project Blog Address Here.html” style=”margin-left: auto; margin-right: auto;” target=”_blank”><img alt=”project-name-for-SEO-purposes-here” border=”0″ src=”http://www.Photo Code Here.jpg” width=”180” /></a></td></tr>
<tr><td class=”tr-caption” style=”text-align: center;”>Project Title Here</td></tr>
</tbody></table>
</td>

</tr>
</tbody></table>
</center>

This code will give you three photos in a row, which is what I use for my galleries because I like the photos to be a good size. Here’s my 2013 Project Gallery to get an idea of what it looks like.

Here are the instructions.

1) Open a new page and name it. Copy the code above, and paste the code onto this new page. Make sure to paste it in HTML mode. Click save.

2) Press view your blog, and go to your post page (not your blog home page) and copy the address of the project post from the address bar. Paste that address to replace the words highlighted in blue in the HTML code. Be careful to only replace exactly what is in blue. Do not remove the quotes on either side as they need to be there.

3) Go into your post as if you are going to edit. Click on HTML. Find the code for the photo you would like to use and copy that code. It will begin with HTTP and end with .jpg. Paste that code to replace the words highlighted in pink. Again, be careful to only replace exactly what is in pink. Do not remove the quotes on either side as they need to be there.

4) In HTML mode type your project name to replace the words highlighted in red. This is what will show below your photo.

5) For SEO purposes type the project/post name to replace the words highlighted in green. Again, do this while in HTML mode. Make sure to put a dash between each word.

6) The number “180“, which I’ve highlighted in orange in the code, controls the size of your photo. If you want your photos to be larger or smaller you can just change the number while in HTML mode to the size you’d like.

After you’ve done all of the above click Compose to check it out… and remember to click Save.

Now, in compose mode, you can add a title to your page or whatever else you’d like. Once you’ve published your page be sure to check photos as you add them to make sure they take you to the proper post page when you click on them. If it doesn’t work, check the page address you pasted in to make sure it’s correct, and try again.

To add a new row of photos simply copy the entire code and paste below the entire code you just copied.

When I was first doing this I found it helpful to print out the code with the colours so I had it in front of me to follow. I also kept this code saved on a separate unpublished page.

And that’s all there is to it. It might sound a little complicated at first but, believe me, if I can do this anyone can. After a while you won’t even need to refer to the code you printed out anymore.

Now I have to say that I am not an HTML expert in any way, shape, or form… but if anyone has any questions I’d be happy to help any way I can.


XOX

Similar Posts

Leave a Reply

Your email address will not be published.

40 Comments

  1. I am so glad you posted this! You must have been reading my mind since this is what I'd like to do on my blog. However, at the moment, I can't even put a facebook button on it following two sets of different instructions. I am a computer idiot and am tired out from trying to get a button to work. I hope I do better with this, cause I've just about given up on the button.

  2. This works!!! I've been trying to figure this out and so far have been unsuccessful! The only thing that didn't quite work was once I finished my page and clicked on the page to view it, the web address does not include "tablescapes," which is my page title, but "project name for seo purposes." As of now, if won't bother me but I wondering when I go to make another page using this process but with a different title, will it work? Any idea where I went wrong? Thanks so much for sharing this! I'll be sharing it with others as well!

  3. I wish I had known this ages ago, I ended up buying a in linkz subscription to make mine look neat. Great post, have to do it next year.

  4. Thanks for the tute! Have a fabulous week xox

  5. Thanks for the great tip! And for sharing at the Show Me What You Got party =) Marcy @ day2daySuperMom.blogspot.com

  6. I've pinned this and will give it a try as soon as I get a bit of free time. Thanks for the tutorial!

  7. Thank you so much for sharing this information!

  8. As someone who never studied code, it made me kind of cross-eyed to see it all, but I'm inspired to give this a try! Thanks so much for the instructions.

  9. Interesting, very interesting. I think
    I may just start a new page..
    thanks so much for sharing!
    found you on Pinterest
    Sandy

  10. Okay, I am pinning this to try when I have time and am sane enough to follow instructions. How did you get your blog title to be underneath the photo gallery?

  11. I am used to seeing home improvement posts over here…now there are blog improvement posts too. I love it! Fortunately, there are no miter cuts to worry about with blog improvements :). Thanks for sharing this tutorial. I agree, a project gallery helps give new readers a sense for who you are and keeps old posts alive.

  12. wow, great! Thanks for sharing the code, too. I've got my gallery all set up, but I like how yours has the name of the project below. I've got a great cutting edge stencil giveaway going… I think you could use $50 in free stencils :o)
    http://www.nap-timecreations.com

  13. Thanks so much for this tutorial. I'm going to try it out. So glad you'd share. Enjoy your day!

  14. Thanks for that great info!! I sooo need to do this! Pinned!!

    Jenny from diywithjenandb.blogspot.com

  15. This is awesome! Doing it! Thank you for sharing at Rustic Restorations Weekend!

  16. Thanks so much for sharing at the Coastal Charm link up. I would love to try to tackle this one and you gave great instruction. Thanks,
    Kate

  17. This is great! Just finished working on my furniture gallery wall using your code and tutorial. For step 3, in pink, I found that you can just right click on the image from your post that you want to use for the gallery and click on "copy image location". You can then just paste it into the PINK section for step 3. That may be easier than trying to find the code in html form for some.
    Thanks again for this post!

  18. I've been looking for just this very thing! I have a lot of projects to share, but haven't figured out how to "summarize" the options for my visitors. Thanks so much! Found you thru Nifty Thrifty Things

  19. I want to try this, I am fairly new but spreading my wings a bit, if it does not turn out, if I do not do anything I take note to the beginning and the end of the code so I can take it out. Thanks for the share.
    Living F.A.B.ulously on Purpose

  20. So, I am switching to Word Press soon, and I just tried it there, and it totally works with WP too!! I just wanted to let you know! Thank you so so so much! I was excited for my blogger blog, but even more excited that I can do it with WP too! 🙂 Now you know.

  21. I have been wanting to do this, Tuula! Thanks so much for the tutorial. Just pinned and shared on G+! Thank you so much for sharing at A Bouquet of Talent! Always so thrilled to have you join us! Have a wonderful weekend.
    HUGS
    Kathy

  22. You are awesome! I have tried several other tutorials for this and failed, yours is working for me! YAY!!!