Manually Add a Thumbnail Gallery To Blogger

My transition from Wordpress to Blogger has been painless and I am enjoying the experience overall. Sure, +WordPress is a great blogging platform that allows for a ton of customization but that's not what I was looking for with my move to +Blogger. Without starting any type of comparison of the two, because I enjoy and appreciate them both, I want to discuss a solution based on basic HTML for thumbnail galleries that works well within Blogger. Why did I need it? From what I see, there isn't a nice way to insert slideshows or galleries into Blogger.

As a prerequisite, I'm assuming you have a web server somewhere that is publicly accessible. This could be via a web hosting provider, Drop Box, +Google Drive, etc. You will want to upload the images you plan on using for the blog post to an organized and publicly accessible location so your blog can link to the images and display it properly. Second, you'll want two versions of each image used in the gallery, this is for web speed and processing purposes. For example, if I have six images that are 800 pixels by 600 pixels, I don't want to actually use those larger versions for displaing in the web page but I do want those versions to open when I click on the image link. This concept is even more important if you plan on referencing high resolution images in the gallery.

As an example, see below for two images I am uploading to my web host.

• blog_photo_1.jpg has a 3264x2448 pixel resolution
• blog_photo_1_thumb.jpg should be re-sized to about 5% of the original or (150 by 'x' pixel resolution)
  The actual % re-size all depends on how big your source image is but aim for 150px wide

From my experience, staying in the 150px max width range works well on thumbnails if you want three images on each row. If you wanted to display two images on each row, your thumb image could be 300px wide for example. It actually depends on how wide your post section is on your Blogger theme. You may need to do some experimenting to see what fits best for your blog, but once you have it, make note of it for future posts that will feature thumbnail galleries.

If you need a web based free tool for re-sizing and saving the thumb version of your original file, try using pixlr.com. Just make sure that when you perform the re-size that you let the image height auto-adjust for the width changes so it looks proportionate overall. Now that we have our original image, our thumbnail image, and we have uploaded them to a public location we can reference them in our blog post.

We will use this post as an example. Let's pretend that I have written some well descriptive text and want to reference a thumbnail gallery below this paragraph. What I want to do now is switch from the 'Compose' view and goto the 'HTML' view in Blogger and enter code that will reference my external images in a table format.

<br />
<table cellpadding="3">
<tbody>
<tr> 
<!--  GALLERY IMAGE NUMBER ONE  -->
<td align="center" width="25%"><a href="http://domain.com/custom_image_dir/file1.png" target="_blank"> <img src="http://domain.com/custom_image_dir/file1_thumb.png" /><br />Text FOR Photo 1</a></td>

<!--  GALLERY IMAGE NUMBER TWO  -->

<td align="center" width="25%"><a href="http://domain.com/custom_image_dir/file2.png" target="_blank"> <img src="http://domain.com/custom_image_dir/file2_thumb.png" /><br />Text FOR Photo 2</a></td>

<!--  GALLERY IMAGE NUMBER THREE  -->

</tr>
<!--  END ROW ONE AND BEGIN ROW TWO -->
<tr>

<!--  GALLERY IMAGE NUMBER FOUR  -->

<!--  GALLERY IMAGE NUMBER FIVE  -->

<!--  GALLERY IMAGE NUMBER SIX  -->

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

The break <br/> line just ensures there is a blank space before your table begins and may not be necessary. From there you define a table, body, row, and then columns. In this example, three columns for two rows. I left spaces between where you would insert the gallery image information (see Three, Four, Five, Six above.) The most important item to look at is the image url (href) versus the image source (src) being displayed:

<a href="http://domain.com/custom_image_dir/file2.png" target="_blank">

<img src="http://domain.com/custom_image_dir/file2_thumb.png" /><br />Text FOR Photo 2</a>

The actual image source should be the thumbnail version of the image and the href or link should goto the larger or full size version. I hope this can help some Blogger users out there, good luck! Do you have a better solution for using slideshows and galleries with Blogger? Please let me know!

photo credit: jmoneyyyyyyy via photopin cc