Wednesday, January 13, 2010

How to put a picture into a post, in Blogger

This article describes how to insert a picture into a blog post or page, using Blogger's Post Editor.  

It applies no matter whether the picture comes from, but has particular information about pictures that are already in Picasa.

Pictures can be added to all of your blog posts, and they can be positioned almost anywhere you like with the post.

They can be photographs, or diagrams that you have made.

When you want to put a picture into a blog post, you can either:

  • Upload it through Blogger's editor, or 
  • Upload it to somewhere on the internet first, and then just link to that location from Blogger.

I recommend uploading pictures outside Blogger because you can  control the size and picture quality of the uploaded files:   if you do the upload through Blogger, then the resolution is often reduced and this can make your pictures look fuzzy.  However I do recommend using Picasa-web-albums as the "somewhere else on the internet, because only pictures stored in Picasa can be used as thumbnail images for your post.

How to put a picture into a post

1  Make sure you know where the original picture is and that you have copyright permission to use it.

2  If the photo is not already on the internet, upload it to Picasa-web-albums, or another tool (eg Flickr, Photobox, etc) that will give you the link to the picture.

3  Copy the internet-location (ie the URL) of the picture file,   (This article tells you how to find the location of a picture that's stored in-Picasa web-albums.)

4  Click the picture icon on the toolbar: 

Enter the picture location into the box that opens. 

These days, there are a number of options to choose from:

  • If the picture is on your computer use the "Upload an image" dialog
  • If the picture in in Google Photos or Picasa web albums, use the Picasa-web-albums option
  • If it is on the internet, use the "From URL" option.

If you use the Picasa-web-albums option, then you can choose more than one picture to add at the same time.

5  Click Add selected.

6  The picture you have chosen appears in your Edit Posts window.

Job Done!   The picture will now be inside your post when you publish it.   Course you will probably want to organise your text and your pictures a little more.  Read on for information about how to manage these settings.

Controlling the pictures in your post

Size and alignment

When you click on a picture, a small menu opens (generally beside or under the picture), with options to:
  • choose the size (small, medium, large, extra-large),
  • align it (left, centre or right)
  • remove it

Aligning text and pictures

The most basic form of alignment is to make a  picture to sit in the middle of a paragraph of text, rather than underneath it,   To do this.
  • Go in to Edit HTML mode 
  • Locate the picture you want 
  • Delete the line before it that says 
      <div class="separator" style="clear: both; text-align: center;">
  • Delete the first line after it that says


There are far more sophisticaed ways of doing this, though - read about them in aligning text and photographs.

Picture Position

Quite often, pictures that you add through the toolbar are put at the start of the post, or perhaps the start of the current paragraph, instead of exactly where you want them.

You can often move a picture around by drag-and-drop (click the picture, drag it, and drop it where you want it to go) - though sometimes this doesn't work as well as it should.

You may need to edit the HTML to move the picture around:   to do this, go into Edit HTML mode, and find the code for your picture relative to the other text in your post.   Every case is a little different, but in general the code for a picture looks like:
<a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="" />&nbsp;</a>

If you want to move a picture by editing the HTML, make sure that you take all the code between the opening  <a href    ....    and the closing   </a>

For more information about how picture code is structured and how you can change it, see stopping pictures in your blog from being "clickable". and putting text and pictures side by side.

    Where to find more information

    Finding the URL of a picture that's stored in-Picasa web-albums

    Finding the URL of a picture stored in Flickr

    Copyright, blogs and bloggers

    Inserting an animated picture into a blog post

    Stopping pictures from being able to be clicked

    Aligning text and pictures in blog-posts

    Integrating Picasa and Blogger

    Share this Article


    HTML link code:

    BB (forum) link code:

    Subscribe to Blogger-hints-and-tips

    FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

    Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

    No comments:

    Post a Comment