40 Problems uploading your images to Blogger? Here's a temporary solution October 17, 2007 /

It seems that many Bloggers are currently unable to upload images to their blog posts. This problem is currently being investigated by the Blogger team, and while we are told that a solution is "imminent", this is still causing many problems.

Usually when this problem occurs, you will receive an error message and error code which you can report to the Blogger Team on this thread in the Blogger Help Forums.

Until the image upload problem is fixed, you may want to consider uploading your images to a free hosting site, and link to these from your blog posts. While this is hardly ideal, I have found this does bypass the problem and displays images correctly. Here's how you can link to externally hosted images in your blog posts.

Upload your images to a free image hosting service

There are dozens of free image hosts to which you can upload your images. Perhaps the most popular of these free services are Photobucket and Imageshack, though you may easily find other services by performing a Google search for Free Image Hosting.

You may need to set up an account with your choice of image host, and once you have done so, follow the instructions for your host to upload your images.

When you have uploaded the images you wish to use, make a note of the exact URL of your image. You will need to use this when linking to the image in your post, so it may be useful to copy this to your favorite text editor.

Create your post as normal

Write your Blogger post as normal, but without the usual image upload. In the place where you would like to feature your image, you can use this simple HTML tag to link to your image, which will make this display in your blog post:

<img src="yourimagehost.com/yourimage.jpg"/>

You will need to replace "http://yourimagehost.com/yourimage.jpg" with the exact URL of your image, where it is hosted on your image host.

This simple code will display the image you specify which by default is aligned to the left of any text which follows. You may prefer to customize the way the image displays in the post. In this case, here are alternatives to the three alignment methods used when uploading images through Blogger:

• Align your image to the left of all text:

  <img src="http://yourimagehost.com/yourimage.jpg" style="float:left; margin: 0 10px 10px 0; border-width: 0;/>

• Align your image centrally (with no text on either side):

  <img src="http://yourimagehost.com/yourimage.jpg" style="display:block; margin:0px auto 10px; text-align:center; border-width: 0;"/>

• Align your image to the right of all text:

  <img src="http://yourimagehost.com/yourimage.jpg" style="float:right; margin: 0 0 10px 10px; border-width: 0;"/>

Don't forget to replace all instances of "http://yourimagehost.com/yourimage.jpg" with the actual URL of your image!

Adding "Alt" to your image tags

"Alt" means "Alternative text", which is displayed instead of your image for browsers which do not display images (eg: Lynx), for accessibility reasons, and in case your image cannot be displayed for some reason. While it is not strictly nescessary to add alternative text to your image tags, you may prefer to do so. Here is an example of how to add alternative text to an image:

<img src="http://yourimagehost.com/yourimage.jpg" style="float: left; margin: 0 10px 10px 0; border-width: 0;" alt="My Image"/>

You can replace "My Image" with a more appropriate description for your image instead.

Alternative text can help your blog rank better in search engines, and is usually inserted by Blogger when you upload your images in the regular way.

Making your image into a link

When you insert an image using the image tags above, the image displayed will not link to the image location as it does when you upload an image through the Blogger upload system. If you would like the image to become a link to its' location online, you can use the following method:

<a href="http://yourimagehost.com/yourimage.jpg"><img src="http://yourimagehost.com/yourimage.jpg" style="float: right; margin: 0 0 10px 10px; border-width: 0;" alt="My Image"/></a>

Again, don't forget to change the URLs to match that of your image's online location!

You can also use this method to create an image link to any other website you prefer. Simply change the <a href="..."> section to match the URL you wish to link to.

I hope this alternative method will enable you to post as normal until Blogger have solved the problems we've all experienced when trying to upload images to our posts! Which I hope will be very soon...

Technorati Tags: blogger+problems | uploading+images | blogger+posts | help