Tuesday, 23 October 2012

How to Create a Project Gallery (Table of Images) in a Blog

Pin It!

I like things to be pretty and organised and my blog is no exception to that! Yesterday I published a post drawing attention to the fact I had finally got around to updating the project pages on my blog with an image gallery, and it occurred to me that it is something that a lot of bloggers would probably love to add to their own sites but they don't have the HTML know-how. So - since I know many of my followers have their own blogs - here is how you can add a table of images or a project gallery.

Before I get into the tutorial I'll just point out that if you have a Wordpress blog then this should work just as well for you as it does in Blogger, but there are plug-ins you can get that may be more user friendly if you aren't confident with website coding. Design, Dining and Diapers has just published a great post on how to create a project gallery in a Wordpress blog using a plug-in.

Creating a Project Gallery in Blogger (or any HTML based platform)

You can use this code to line up images in any post, but since I wanted to have project galleries linked from a menu I created a new page from the Blogger dashboard and copied the code I've shown below in the text box. Don't forget to make sure you have the editor set to "HTML" rather than "compose"!

<table>
<tr>

<td valign="top"><table align="center" cellpadding="0" cellspacing="0" width="125" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"> 
<tr><td style="text-align: center;"><a href="WEBSITE URL" target="_blank"><img alt="IMAGE DESCRIPTION" border="0" src="IMAGE URL" width="125" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">TEXT</td></tr>
</table></td>

<td valign="top"><table align="center" cellpadding="0" cellspacing="0" width="125" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"> 
<tr><td  style="text-align: center;"><a href="WEBSITE URL" target="_blank"><img alt="IMAGE DESCRIPTION" border="0" src="IMAGE URL" width="125" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">TEXT</td></tr>
</table></td>

<td valign="top"><table align="center" cellpadding="0" cellspacing="0" width="125" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"> 
<tr><td style="text-align: center;"><a href="WEBSITE URL" target="_blank"><img alt="IMAGE DESCRIPTION" border="0" src="IMAGE URL" width="125" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">TEXT</td></tr>
</table></td>

<td valign="top"><table align="center" cellpadding="0" cellspacing="0" width="125" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"> 
<tr><td style="text-align: center;"><a href="WEBSITE URL" target="_blank"><img alt="IMAGE DESCRIPTION" border="0" src="IMAGE URL" width="125" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">TEXT</td></tr>
</table></td>

</tr>

</table>


The parts highlighted in pink are the bits you must change.

Website URL
This is the URL of the webpage you want visitors to be taken to when they click on the image.

Image Description
The alt tag adds a text description to the image. It won't be visible, adding it is more for search engine optimisation since web robots can't "read" a picture. It is also  the text that will show if a temporary blip prevents the image loading up.

Image URL
This is the link for the picture you want to show. If you have a Blogger blog then this will probably be from Picasa.

Text
This is a brief description of the post/topic the picture is linking to.

This code creates a table which lines up four images side by side. Each big block of coding applies to one image, so if you have less than four images in a row just take out the extra blocks. If you want to add another line of images to the table you will need to add this bit of code beneath the code for the last image:

</tr>
<tr>

Then copy in this block of coding again (one for every image you want to show on the new row):

<td valign="top"><table align="center" cellpadding="0" cellspacing="0" width="125" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"> 
<tr><td style="text-align: center;"><a href="WEBSITE URL" target="_blank"><img alt="IMAGE DESCRIPTION" border="0" src="IMAGE URL" width="125" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">TEXT</td></tr>
</table></td>
Hopefully this screen shot will make things clearer. The bits of code you need to add in when adding a new row to the table are shown in pink:


This coding would produce a table that looks like this:



Hope this helps or inspires someone! If you have any questions or need something clarified please feel free to ask. But please note I am not an expert on programming websites so my technical support abilities are limited! 

18 comments:

  1. Thank you Angela! I really need to do this too :)

    Do you know how to make it automatically include all the posts with a certain label? I'm sure I've seen that before but I can't find it now that I need it (of course!).

    ReplyDelete
    Replies
    1. I think the easiest way to set up pages that show all posts with certain tags is to go to Layout/add a gadget on Blogger and select the label gadget. I haven't personally tried it, but this site explains it a bit better than I can:

      http://blogger-hints-and-tips.blogspot.co.uk/2010/12/how-to-put-put-posts-into-your-pages-in.html

      Delete
  2. Thanks so much for this tutorial! I was just thinking of doing this on my blog and now I don't have to search for how to go about it!

    Emily @ notwithoutheels.com

    ReplyDelete
  3. I have been trying to figure out how to do this, thank you for sharing such a wonderful tutorial!

    ReplyDelete
  4. This is really useful, I wouldn't have known how to create such a gallery for my blog, so now I do thanks :-)

    ReplyDelete
  5. I have been meaning to sort my project page out for a long time and so this will help thanks.

    ReplyDelete
  6. This is really useful, I wouldn't have known how to go about this for my blog as it grows, so thanks! :-)

    ReplyDelete
  7. You are a whiz. I will also try this. Thank you,

    ReplyDelete
  8. This worked like a charm! Thank you for this code, it's so refreshing to have something actually work! (I am html challenged).

    I'm proud of my new project gallery!
    http://www.myclevernest.com/p/project-gallery-ii.html
    Alyssa
    Clever Nest

    ReplyDelete
  9. You are awesome! I thought I had to purchase InLinz to do this. Thanks so much!

    Linda
    www.NightOwlCorner.com

    ReplyDelete
  10. Question for you... If I have a row with only one or two gallery pictures, how would I center them rather than having them off to the left?

    ReplyDelete
  11. OK I have been trying and trying...but my gallery keeps stretching across the sidebar? Any tips on how to stop this!?

    Thanks so so much!
    -Katie

    ReplyDelete
  12. I am totally html ignorant but you seem to have explained it where I can do it! I am going to work on this today. Thank you so much!

    Pam
    @ www.pjstreasures.blogspot.com

    ReplyDelete
  13. This is totally fantastic! I tried it, it worked!
    Thank you thank you thank you!

    ReplyDelete
  14. This is awesome information! I have wanted to add a project gallery to my blog for some time. I'm going to have to try this soon. Thanks!

    ReplyDelete
  15. thank you thank you thank you! Just put this on my site and it makes my craft & DIY page so much better. Appreciate all of your tutorials.

    www.simplycraftedblog.com

    ReplyDelete

Thank you for taking the time to leave me a comment. I try to respond to as many as possible. :)