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

Epic: E-Books For Kids

Epic is finally here for the iPad but will it be a must have service for your family and how long do we have to wait in order to see it available on Android devices? If you haven't heard of it yet, Epic, is a subscription based e-book reader for children. Out of the gate, it only supports the iPad2 or later and will cost you $9.99 per month while providing over 2,000 books. Try it for yourself and demo it today for free on the Apple app store.

The application has a few bells and whistles featuring personalized recommendations, offline access, and an achievement or rewards system. I mean, who doesn't like to earn badges or rewards? My question to parents is, do you need Epic? Our family is still fond of the library experience and we sometimes use it as an excuse NOT to use our tablets or phones. We like to get out of the house, look for books, take a few home, and return them when we're done. Let's not also forget that this is another monthly bill for us on top of any existing a la carte services we currently subscribe to.

Do you already have Cable TV? HBO? +Netflix? Amazon Prime? If you are a Kindle owner, how about Kindle Free Time for your children? Maybe you already use Oyster Books as well. What about the highly anticipated +WWE Network? Sure, I understand that most of those services are strictly for entertainment purposes and not education but bills are bills. Do I want my children to read more? Sure. Are there more ways I can get my child reading without a monthly fee? Of course. Check with your school system as they may provide access for sites like, http://tumblebooks.com or some other source. Another thing to think about is, if you handed your child your iPad right now, would they first open up a game or a reading app? Are you going to hand over the device or get them their own device? If so, you might want to make sure they are using it for what you intended. Also, if you are not bringing your child to the library, you need to start doing that first. It goes beyond books. It's about community, events, and being social. The library can be a great getaway for you and your children to spend some quality time together. Try it. Find your local library here.

Are our children reading less now than we did? I make my career in technology, applications, and services so I don't dismiss the value and importance of Epic or any other service but maybe the right thing to do is show them how they can get satisfaction and enjoyment from NOT being on their gadgets all the time. Odds are, your child is going to be a gadget guru by the time they are ten years old whether you have a premium e-book service or not. They are also going to learn how to read about two years earlier than you did based on my experience with current elementary curriculums.

Epic looks like a good service and it looks like something your child will enjoy if you own an iPad but you'll have to decide if the monthly price tag is worth it or if you simply have the added budget to include it in your existing monthly subscription expenses. It's only $9.99 right? But this is just the beginning of a vast future in an la carte internet based consumption services world. Say that three times fast and choose wisely.

Update: In addition to a free trial through the iPad app, Epic is offering an incentive price of $79.99 per year, as opposed to the standard monthly rate.

photo credit: Enokson via photopin cc