Google Picasa: How to Fix the "Localhost" Image Problem

Picasa is Google's photo management application for Mac, Windows, and Linux. (I've always thought that Picasa for Mac was kind of redundant seeing how iPhoto comes preinstalled on every new Apple computer, but I digress.) Today my wife installed Picasa on our iMac because her sister, who uses Picasa on Windows, recommended it for creating photo collages for her blog. I got my first taste of the program when my wife informed me that when she tried to post the photo collage she'd created, she could see it in her browser, but her sister couldn't see it when she viewed the blog on her PC. Naturally, since I'm the one-man tech support staff for our home, I had to investigate.

I quickly found the problem. I opened Picasa and found the collage that my wife had made. When I clicked on the BlogThis! button, then selected the blog, layout, and image size I wanted and then clicked Continue, I was given something that looked like this:

<div style='text-align:center;margin:0px auto 10px;'><a href='http://localhost:63927/748c32b0f480bb22083a99404387413a/image/60488be178128f6b.jpg'><img src='http://localhost:63927/748c32b0f480bb22083a99404387413a/image/60488be178128f6b.jpg?size=400' border='0' alt='' /></a> </div>

My wife is savvy enought to know that that's HTML code, and she knew how to copy and paste it into her blog, which she did. When I looked at the code, I instantly saw what the problem was: the server on which the images were supposed to be located was "localhost".

For those who might be unfamiliar with the term, localhost is a fancy way of saying "the computer I'm currently using." Web browsers can use localhost (or the IP address 127.0.0.1) as a way of pointing to the selfsame computer to view a locally hosted image, for example. That's what Picasa was doing, and why my wife saw the picture in her own browser but everyone else on the Web couldn't see the image in her blog post.

So here's the solution: I clicked "Save As Draft" in the Picasa: BlogThis! window, then I went to my Web browser and pulled up the Blogger Dashboard, and then I clicked on the "Edit Posts" link for that blog. Voilà! The code was no longer pointing to localhost; Picasa had actually uploaded the image this time, so the code was legit. Here's what it looked like:

<div style='text-align:center;margin:0px auto 10px;'><a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3itcpUrE41Ob-mPaTdSS495k8pn1sEialhYtcnruSN-ippg75epePtBV51MJYRMpwtxSomYeJTiD5bmdPcyzfUgLpX0Q14e7W6euYD12BH1JI0AMILu1amK4DKEWPI74deLDLw/s1600-h/Halloween+Fun+with+the+Taylors.jpg'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3itcpUrE41Ob-mPaTdSS495k8pn1sEialhYtcnruSN-ippg75epePtBV51MJYRMpwtxSomYeJTiD5bmdPcyzfUgLpX0Q14e7W6euYD12BH1JI0AMILu1amK4DKEWPI74deLDLw/s400/Halloween+Fun+with+the+Taylors.jpg' border='0' alt='' /></a> </div><div style='clear:both; text-align:CENTER'><a href='http://picasa.google.com/blogger/' target='ext'><img src='http://photos1.blogger.com/pbp.gif' alt='Posted by Picasa' style='border: 0px none ; padding: 0px; background: transparent none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;' align='middle' border='0' /></a></div>

Whoa, that's a lot more code than before. Apparently, Google really wants the whole world to know that you're using Picasa, because it sticks a little Picasa logo after your image—without asking for your permission to do so. If the logo annoys you, it's easy enough to remove; just copy everything up to and including the first </div> (right about in the middle of all that code). Then from your Blogger Dashboard, click on Edit for the blog post to which you want to add the image, and paste the code. In this example, the code I pasted looked like so:

<div style='text-align:center;margin:0px auto 10px;'><a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3itcpUrE41Ob-mPaTdSS495k8pn1sEialhYtcnruSN-ippg75epePtBV51MJYRMpwtxSomYeJTiD5bmdPcyzfUgLpX0Q14e7W6euYD12BH1JI0AMILu1amK4DKEWPI74deLDLw/s1600-h/Halloween+Fun+with+the+Taylors.jpg'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3itcpUrE41Ob-mPaTdSS495k8pn1sEialhYtcnruSN-ippg75epePtBV51MJYRMpwtxSomYeJTiD5bmdPcyzfUgLpX0Q14e7W6euYD12BH1JI0AMILu1amK4DKEWPI74deLDLw/s400/Halloween+Fun+with+the+Taylors.jpg' border='0' alt='' /></a> </div>

That's all, folks! There might be a couple more steps in there depending on whether or not you're already logged into Blogger within the Picasa program, etc. I should also mention that if you want to create a brand new blog post with an image from Picasa, you can just delete everything after the first </div> and then finish your blog post right there in Picasa (just click "Publish Post" when you're done), or you can Save As Draft and then finish the post in your browser if you prefer.

Also, I suspect that these instructions should work on Linux or Windows as well. A Google search for picasa localhost brings up results from people using both platforms who had the same problems and couldn't figure out the solution (hence my decision to blog about this rather than just show my wife how to fix the issue).

If you found this information useful, please consider making a donation of any amount. Even $2 or $3 would be awesome! Thanks!