I have been blogging for a while and now want to take the next step and actually include images in my weblog entries. The problem is, my weblog host doesn’t offer image hosting. A friend told me I should use Flickr to host my images, but I don’t see how that works. Can you help me out? Thanks.
The old saw that a picture being worth a thousand words holds just as true with blog entries as it does with books and presentations to bored colleagues, so it’s a smart addition you’ll be making to your weblog. But actually including the images can be a bit tricky because, as you note, they need to live somewhere on a server somewhere on the Internet.
Fortunately you can get a free account at the Yahoo-owned Flickr photo archive service and use it for just this purpose. Here’s how…
First, pop over to the site and sign up for an account. You’ll have to enter a valid email address since it sends you a confirm message to prove you’re who you say that you are. Once that’s done you can log in to your account where you’ll see a big link that says Upload Photos. Click on that.
Now you’ll be able to specify each of the photos you want to upload by clicking on the “browse” button next to each of the six slots shown on the page:
You can see in this figure above that I’ve already specified an image to upload for the first slot. Since that’s the only image I want to upload, I’m ready to click on the UPLOAD button on the bottom. Notice, however, that I have specified “public” for the permission to this file. I could specify something else, but it then wouldn’t work for including the file in my weblog entry itself.
Next, you’ll be prompted to enter a description and some key words:
Since we’re not going to be pointing people to the Flickr image browser but just hosting the image on the Flickr service, it doesn’t matter if you enter anything here or not. I usually skip all of this information completely and just move along by clicking SAVE on this screen.
Now that you have the new image on the Flickr service, the next step is to figure out its Web address or “URL”. That can be done by viewing the image in Flickr, as shown below, and clicking on the “All Sizes” button, where the cursor in the below image is pointing:
Click on the “All Sizes” button and, finally, you’ll be shown the official URL of the image, suitable for cutting and pasting directly into your weblog entry:
In this case, the URL shown is http://static.flickr.com/26/59260931_afef08ff5_o.jpg.
To reference that in your blog entry, you’ll need to either use an “add image” feature if your blog editor has it (many do), or simply type in the following HTML:
In this specific instance, it’d look like this:
alt=”Sony PSP demonstration image” />
Once you have that mastered, it turns out that there are a lot of ways you can tweak the placement of images within text on a Web page, including adding vertical and horizontal space, changing the alignment of the material around the image and so on. That’s beyond the scope of this answer, but you might find it helpful to check out my book Creating Cool Web Sites, which will give you all the information you need to get everything “just so.”
I hope this tutorial has been helpful!