Wednesday, January 13, 2010

Inserting a picture into a blog post

This article about integrating Picasa and Blogger has instructions for inserting a picture into a blog post or page.  

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

Pictures and blog posts 

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. 

If the picture is on your computer use the "Upload an image" dialog, or if it is on the internet, use the "Web address(URL" option.


5  Click Ok.

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




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

If you want the picture to sit in the middle of a paragraph of text, rather than underneath it,
  • 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

    </div>



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="http://4.bp.blogspot.com/tkoGx2454hA/s1600-h/Inserting+a+picture.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ufFKAr0d1qmq9aW1KZfNNsv-AbPNBP0y739vGFE5k_qh3d0L2VvpYad99hacIJ43NVQtcwTW5ABdd4rba9DLBlzz0RABme-IMzdy28SvaiCwDB_-1EG6oqf4kDwZfgylWifcOKtc5it5/s400/Inserting+a+picture.gif" />&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.



    Related Articles:



    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

    adsense

    0 comments:

    Post a Comment

     
     
    Copyright © blog
    Blogger Theme by Blogger Designed and Optimized by Tipseo