61 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: | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

61 comments:

  1. Can this be done on websites too?
    Thanks

    ReplyDelete
  2. Hi Amanda,

    I just got an e-mail from Snap.com with your picture and blog as the feature. Congratulations!

    ReplyDelete
  3. @Home: yes. you can use images in websites in the same way described here. In fact, much of the HTML coding used in your Blogger template can also be used in web pages. To demonstrate this, take a look at the tools section: this part of Blogger Buster isn't actually a blog, but PHP web pages designed to have the same look and feel as my blog!

    @Sean Williams: thank you! I just received the same email too. Snap-shots contacted just after I posted about them to ask for permission. It's great that they used the article (and I seem to have had lots of visitors through this too!).

    ReplyDelete
  4. You can also try http://www.gigafiles.co.uk

    It is my favourite with 5GB space, 50MB file size limits. And it allows hotlinking.

    ReplyDelete
  5. Thanks for that, Anonymous :)

    ReplyDelete
  6. Dear Amanda,
    I tried to insert html code from image that I hosted in photobucket into my template, but it always say Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "current" must end with the ';' delimiter.
    What is wrong?
    Thank you for your suggestion

    ReplyDelete
  7. How do you add alternate text to the side bar images in Blogger? There is no apparent way to do this. After clicking "add gadget" and "picture" you only have the following options: Title, Caption, Link, and then of course the image. There does not appear to be a way to edit the html. Even when I try to edit the html under "layout" it does not show the html tags for the images in the sidebar. Please help!

    ReplyDelete
  8. Hi Amanda, just want to thank you for this post which I bookmark and which I come back to everytime Blogger acts up on me which is again and again. You save my post :).

    ReplyDelete
  9. I just get a blank box or and no image when I try to preview. I have looked on my fave blogger blogs and I have problems seeing their images too. I don't get this issue veiwing non blogger blogs (ie wordpress). Please fix soon. I'd hate to have to switch.

    Thanks

    ReplyDelete
  10. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  11. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  12. I have been trying to do this for ages, thanks guys. The was cery usful

    ReplyDelete
  13. my problem is solved! Terima Kasih :D

    ReplyDelete
  14. This blog Is very informative , I am really pleased to post my comment on this blog . Leather Jackets It helped me with ocean of knowledge so I really belive you will do much better in the future . Good job web master .

    ReplyDelete
  15. I really appreciate every single piece of work that you publish and share with the big, wide world.t is always refreshing to read posts of other bloggers and learn something from them.Great!!!

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. Wow, I just want to say that this work that you are doing right now is truly amazing and inspirational to say the least. Thank you for it all I really do appreciate it my friend.

    ReplyDelete
  18. Thank you for sharing. You've encouraged us all to open and broaden our minds!

    ReplyDelete
  19. It's really a wonderful job. This message contains useful information that helps us a lot. I have never seen such a large contribution.

    ReplyDelete
  20. It's really a wonderful job. This message contains useful information that helps us a lot. I have never seen such a large contribution.

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. What a great post and great idea, loved it - interesting stuff!

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Please Amanda provide the concrete solution regarding image uploading to blogger.
    ab rocket twister | african mango reviews | pregnancy miracle review

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. This comment has been removed by the author.

    ReplyDelete
  29. You're not the common blog writer, man. You definitely have something powerful to add to the web. Such a special blog. I will come back again for more.

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete
  33. This comment has been removed by the author.

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. This comment has been removed by the author.

    ReplyDelete
  37. This comment has been removed by the author.

    ReplyDelete
  38. This comment has been removed by the author.

    ReplyDelete
  39. Nice post very informative thanks for sharing this post.

    ReplyDelete
  40. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  41. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  42. This simple code will display the image you specify which by default is aligned to the left of any text which follows.

    ReplyDelete
  43. Thanks, I find when I have problems that if I use the full url instead of a relative url it generally works.

    ReplyDelete
  44. So now at last we have a solution for the image uploading problem. Thanks a lot man :)

    ReplyDelete
  45. I have encountered these problems, had them a while ago, but now they seem to have fixed them.

    ReplyDelete
  46. I have encountered these problems, had them a while ago, but now they seem to have fixed them. Although I experience them sometimes for some reason.

    ReplyDelete
  47. I have encountered these problems, had them a while ago, but now they seem to have fixed them. Although I experience them sometimes for some reason!

    ReplyDelete
  48. Con’s is really one of the biggest companies in the world and in the field of engineering it has no competition at all essay help

    ReplyDelete
  49. Con’s is really one of the biggest companies in the world and in the field of engineering it has no competition at all essay help!

    ReplyDelete
  50. Awesome! Thanks so much for posting these helpful tips, I'll definitely be perusing some information from here.

    Software problems? Check this out:
    Medisoft software
    Prefered software by most medical professionals

    ReplyDelete
  51. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete
  52. I’m impressed. Very informative and trustworthy blog does exactly what it sets out to do. I’ll bookmark your weblog for future use.

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy