Friday, August 26, 2011

How to create a gallery or table of images on your blog (Tutorial) & my new Project Gallery

{UPDATED--see below!}

Did you notice my new Gallery page in my navigation bar? I thought it might be nice to have a Pinterest-style project gallery where you could see my blog posts organized by theme and with thumbnail images. This way you won't have to hunt through the tags or wonder what in the world is Rainbow Ice?  since you can see it all at-a-glance.

Here are the first two lines of the gallery:

Project Gallery by Tricia @ SweeterThanSweets



Right now it has my most popular posts in 4 of the 8 categories I usually blog about (Craft, Travel, Learn, Love, Cook, Give, Believe and Inspire). The posts that get the most interest are in the Craft, Travel, Learn and Cook categories so I started with those.

If I add the other 4 categories to the Gallery, could I do away with the "Blog Archive" widget and the "What Am I Talking About?" tag cloud? If you were a first-time visitor to my blog, would you be annoyed that those were not in the sidebar, where you'd usually look?

What do you think?

Okay, now on to the tutorial!

How to create a gallery or table of images:

Want to create your own table of images? You can use a table for your own Project Gallery Page or just to put several images side-by-side in a blog post. (I originally found the code here and modified it to my needs.)

Note: This code will give you clickable images that open in a new page/tab. The caption is not linked to anything and the image is not linked to the original image (which is the default set-up, at least in Blogger). It sets images to be 120 pixels wide, which was the biggest they could be for the width of my blog. Change the width if needed.

Copy and paste the html below and change the blue text accordingly:

<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="yourwebsiteurl" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="yourimagetitle" border="0" src="yourimagesource" width="120" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">yourcaption</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="yourwebsiteurl" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="yourimagetitle" border="0" src="yourimagesource" width="120" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">yourcaption</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="yourwebsiteurl" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="yourimagetitle" border="0" src="yourimagesource" width="120" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">yourcaption</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="yourwebsiteurl" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="yourimagetitle" border="0" src="yourimagesource" width="120" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">yourcaption</td></tr>
</tbody></table></td>

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

</center>


{UPDATES}
1. I just repositioned the code above so that it's more clear. Each "paragraph" above represents and individual image. So if you want to add an additional image, copy and paste the following section to add one (or delete this section to have only 3 images per row... just make sure to adjust the widths of each photo to fit your blog's width accordingly):

<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="yourwebsiteurl" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="yourimagetitle" border="0" src="yourimagesource" width="120" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">yourcaption</td></tr>
</tbody></table></td>


2. Also, here's more info on what the blue text means:

Image Title: This can be anything you want. Keep it relevant for SEO purposes. It's also the name that will show up if, for some reason, your image doesn't load on someone's browser. I usually end my image title with "by Tricia @ SweeterThanSweets" if it's a photo that I took.

Image Source: This is the url where the image is located. They all start with http:// and end with .jpg. If your image is hosted on Photobucket or Flickr, you can find the url when you go to the "share" options. If it's a photo that you're uploading onto Blogger, upload into a draft post as you usually would, then switch from Compose to Edit HTML mode. Look for img src=" or just src=" and what follows the quotation mark is the part you need. You don't have to actually publish the blog post to get this code. Once you upload to blogger and get the image source, you can delete the draft if you don't need it. The image was actually uploaded to the internet whether the post was published or not.





Let me know if you have any other questions and I'll update this post if needed!

56 comments:

  1. Hi Tricia,

    your gallery idea is wonderful!! Thank you so much for sharing the code too.
    My most read posts are tutorials (people love those, don't they?) and food-related - although mine is not really a foody blog ;-)
    best,Duni

    ReplyDelete
  2. Great stuff, I may have to try this... I am going to need to take some pictures.

    ReplyDelete
  3. I love this idea! I think I'm going to have to try this. I was wondering how to arrange multiple pictures.

    ReplyDelete
  4. Very cool idea!
    When I think of "Gallery" I think of photos, maybe you could call it "Blog
    Gallery"? Then I would think you could get rid of your archive.

    ReplyDelete
  5. I think you've given us some more great info that will take me days to digest but will be well worth the time!
    Thanks Tricia!

    ReplyDelete
  6. It looks great, thank you for the info!

    ReplyDelete
  7. Question: What is the difference between the image title and image source? This code stuff makes my head spin. How do we find those with our pics already uploaded to blogger?

    Thanks!

    ReplyDelete
  8. Wow! I love this idea! I'm gonna do it on my blog! Thanks for sharing! I'm now following your blog!

    Angie
    www.littleinspiration.com

    ReplyDelete
  9. Glad it's helpful to everyone. It's surprising how hard it is to put images side-by-side on a blog!

    Image Title: This can be anything you want. Keep it relevant for SEO purposes. It's also the name that will show up if, for some reason, your image doesn't load on someone's browser. I usually end my image title with "by Tricia @ SweeterThanSweets" if it's a photo that I took.

    Image Source: This is the url where the image is located. They all start with http:// and end with .jpg. If your image is hosted on Photobucket or Flickr, you can find the url when you go to the "share" options. If it's a photo that you're uploading onto Blogger, upload into a draft post as you usually would, then switch from Compose to Edit HTML mode. Look for img src=" or just src=" and what follows the quotation mark is the part you need. You don't have to actually publish the blog post to get this code. Once you upload to blogger and get the image source, you can delete the draft if you don't need it. The image was actually uploaded to the internet whether the post was published or not.

    Does that make sense? I'm no expert on HTML but this is my understanding of it. Hope it's clear but let me know if anyone has any more questions and I'll try my best.

    ReplyDelete
  10. Oh this is just awesome! Thanks for the detailed instructions on how to do this! When I find some time, I will certainly be trying it on my own blog!
    Dee - sprytebyrd.blogspot.com

    ReplyDelete
  11. fantastic! i was hoping i'd come across a great tutorial on how to do this exact thing. this will save me countless hours!!!
    thank you so much!
    Jamie

    ReplyDelete
  12. great stuff, going to have to try this. Thanks for linking up!
    Emily
    domesticdeadline.blogspot.com

    ReplyDelete
  13. thanks for the blog tips. will you share at tell me tuesday??

    ReplyDelete
  14. Thank you so much for showing me how to do this and making it simple to use your template. I am gonna get busy and do it...well done!

    ReplyDelete
  15. Thanks, I will use this!

    ReplyDelete
  16. This wonderful post totally contributed to the blog party's success! Thanks for linking up at Creative Bloggers' Party & Hop :)

    PS: I just pinned it on Pinterest!

    ReplyDelete
  17. Thank you so so much! I was going to look today online for a good tutorial on how to do this,and yours. Thank you! I can't wait to create mine!
    Melissa
    www.sweetcoconutlime.com

    ReplyDelete
  18. I am going to have to have to try this. Pinned this so I don't lose the info.

    If you have a minute stop by and enter my Giveaway for a custom made pinstripe skirt.

    http://theorchardinbloom.blogspot.com/2011/08/pinstripe-skirt-giveaway.html

    ReplyDelete
  19. Thanks. I think your coding is far simpler than anything I've come across. Off to work on this today.

    ReplyDelete
  20. Great post! I tried doing this & could never line up the images correctly. Ended up using a linky list for each of my categories.

    -caroline @ c.w.frosting

    ReplyDelete
  21. Thanks a lot for sharing this. I have made my Tutorial page a lot more organized now. Please do check my tutorials page when you find time, for loads of sewing & pattern making tutes, alongside craft and home decor ideas!

    ReplyDelete
  22. I really need to do something like this! Thanks for sharing with us!
    All the best ~

    ReplyDelete
  23. Hi! I'm trying out your tutorial... but what do I change "yourcaption" with?

    ReplyDelete
  24. Fantastic tutorial!! I'll be putting this information to use very soon on my blog's "Tutorials" and "Holidays" pages!!

    Thank you so much for sharing this with everyone!!

    ~Lisa
    Lisa's Craft Blog

    ReplyDelete
  25. Where were you in May 2010? I managed to figure out the html to publish my table of photos (three wide) but I cringe whenever I want to add to it. Next time I may decide that it is simpler to just switch to your method.

    http://pinwheelponders.blogspot.com/

    ReplyDelete
  26. This is such a great tutorial! I can't wait to give it a try!

    ReplyDelete
  27. Thank you so much for sharing this! I have used it to enhance my blog, and your steps are so easy to follow.

    ReplyDelete
  28. YOU ARE A LIFESAVER! I've been frustrated for months trying to figure this out. Your tutorial was so easy to follow and made everything so clear! Thanks thanks and SUPER THANKS for posting this! :)

    I made sure to link your tutorial on my blog. Thanks again!

    http://enjoyerofgrace.blogspot.com/2012/04/japanese-cheesecake.html

    ReplyDelete
  29. great!! thank you very much!!

    ReplyDelete
  30. Hi !

    Its nice tips and i try to use this and give you my link after its work..

    TFS

    ReplyDelete
  31. I'm so excited to have this code! But I can't figure out why it won't let me publish and it says "tag is not closed: TABLE" ? Help.

    ReplyDelete
  32. Thanks very much for your tutorial! All is working well for me, with the exception that the pictures are only posting horizontal...they don't move down vertically.

    ie: they're posting like this +++++
    +++++
    instead of: + +
    + +
    + +
    (which is what I want)...any tips?
    Thank you
    + +

    ReplyDelete
  33. This is brilliant! Used this for a portfolio page so I could show my best stuff from Flickr. And the blue text makes it really easy to find what needs to be changed. Thanks!

    ReplyDelete
  34. Thank you thank you thank you!! I started working on it for my recipes I'm at www.theredheadedprincess.com

    ReplyDelete
  35. Hi Tricia,

    Thanks for the tutorial :)
    I tried on mine but not really successful.
    I tried another way by using blogger template.

    Request to add your tutorial to my blogsite :)

    Visit us at www.tupimbup.com

    ReplyDelete
  36. Thanks so much for the tutorial! I made a gallery on my site thanks to you! and didn't have to pay for it! http://www.theredheadedprincess.com/p/in-kitchen.html

    ReplyDelete
  37. Hi Tricia! Your tutorial helped me so much when I first tried makign my gallery. Just wanted to let you know that I'll be sharing/sourcing your blog for this tutorial tomorrow on my blog. :D

    http://enjoyerofgrace.blogspot.com

    ReplyDelete
  38. THANK YOU, THANK YOU, THANK YOU!!! I have been searching for code ALL DAY and FINALLY came across this post tonight. I really appreciate your help! Much LOVE! www.SugarMamasSweetBowtique.blogspot.com

    ReplyDelete
  39. Oh, and I'm going to share on Facebook! www.facebook.com/SugarMamasSweetBowtique

    ReplyDelete
  40. Thanks for this tutorial! I've been looking for ways to make this possible. I'll definitely try this for sure!

    ReplyDelete
  41. Thank you so much for posting this! Its very useful and I applied it to my blog.

    I have some sort of problem, the link for the last image seems to be broken, not sure what I'm doing wrong. Its the second row, last image: www.alanhawley.blogspot.com

    Any help is greatly appreciated!

    ReplyDelete
  42. This is fantastic!! Looking all over for something like this and it works perfectly, allowing for customization for non html folks like me. Much thanks!!

    ReplyDelete
  43. Thank you for this information. I've been trying to figure out a way to arrange multiple pictures in a blogger post just like this! Your tutorial was very helpful and extremely easy to implement.

    Regards,

    Mike
    Wood Shop Mike

    ReplyDelete
  44. how about if I want to embed photo albums in a gallery page?

    ReplyDelete
  45. This post was most helpful with my blog! Very clear and easy to understand! Thanks again!!

    ReplyDelete
  46. Thanks so much, this helped me big time! Worked perfectly!

    ReplyDelete
  47. Its really a wonderful idea and I am in need of adding this type of gallery in my blog and I shall do it.....
    Download ebooks, softwares and games

    ReplyDelete
  48. HOLY SMOKES! I've been fiddling with a gallery using several different tutorial and code and this is the first one that has worked. Thanks so much!

    ReplyDelete
  49. Hi! May I ask if you have tutorials and codes on how to embed "flash picture" in blogger. You can email me blardony.jfb@gmail.com

    Hoping for your positive response. Thank you and keep up the good work. :-)

    ReplyDelete
  50. I tried another tutorial and it didn't work for me. Yours worked perfectly and I am forever grateful....thank you for posting this :)

    ReplyDelete
  51. Hi! This tutorial really helps me!
    Thanks!

    ReplyDelete
  52. THANKS! This is information I NEED.I try this.Kiss from Serbia,
    Cale

    ReplyDelete
  53. Thanks for sharing this. I actually made it as a template for my articles which i positioned in my footer. Best regards.

    ReplyDelete

I LOVE reading your comments but don't always have time to respond to each one individually. I'll do my best to email you back or swing by your blog. *Please note that if you want a response, your email address must be visible on your Blogger profile.*