21 June 2012

how to use photobucket to host images on your website

This has been bugging me for MONTHS.

I have been wanting to display a bunch of thumbnail images in a footer on my blog and just was not able to do it. It was of course easy to insert images into the body of a post on my blog but the footer is just a code snippet that gets loaded at the bottom of every page so when you create it there is no way to insert images via the GUI.

No problem I thought, I’ll just upload the thumbnail images to Google Docs (now Google Drive) and reference them. And it worked… but only for a few minutes.

Turns out the URL for a Google Drive file is something like this here:

https://lh3.googleusercontent.com/UsMcbj2QLRo0hCCJokKE2-tyzan_64s63imheFoxpSXIAJlUBrcAFCbClVhbX1xRLEtrNveBx53tTcHILaDNKi4ePfBNnaDf8vUD3-fkZFRZ

Note that it does not end in .JPG or .PNG or whatever your image happens to be. That should have been my first clue. As it turns out the location of your image (or any other file you store in your Google Drive for that matter) changes from time to time and when it does, the referenced image of course ends up being a broken link on your site.

What do do?

I have a Flickr account so figured I would try that. Flickr is a fantastic picture hosting service that lets you share images in tons of ways. As it turns out, direct links is not one of those ways. :( Oh sure you can embed images (which is what I do with most of the pictures on my blog) and you can share pictures with any number of social networks but that doesn't help me out any. I just wanted a place to host images for free that I could reference in the HTML of my site.

Then a co-worker came to the rescue. He suggested I use photobucket as this service was designed to provide exactly what I was looking for. And you know what? He was right.

Not only can you share images you upload to photobucket in pretty much all same ways you can on Flicker, you can ALSO get a permanent, direct link to the file. Like this here:

http://i1256.photobucket.com/albums/ii490/itsnitram/Twitter.png

Note that this URL does end in .PNG which is exactly what I wanted. Mission accomplished.

Technorati Tags: ,

No comments: