Blogger.com Help – Lesson 6 – Adding an image to a post

There is much more to blogging than just writing good posts, whatever you define good to be. You might also want the ability to create a stylish and compelling look to your posts too. In this lesson we will take a close look at the options available to us when creating or editing a post using the ‘Add image’ control.

Note to new visitors! If you would like to know more about this series or view all available lessons, just follow the appropriate link.

Adding an Image to a Blogger.com Post

If you have been blogging for some time now, you might already be quite familiar with the Add/Edit post screen. Not only are you provided a way to write your posts, but you can also give them some style. Most of the basic controls, including the create hyperlink function, were already reviewed in the ‘Writing a post with the post entry screen’ lesson. There are still some controls we did not go into, but we will in this lesson.

I’ll be using the ‘Do you live cautiously…’ post on the Views on Life blog as an example of the extended features. I will redo the referenced post as a new post so you can view the before and after. The second one I’ll name the same, but with ‘Part 2′ added to the title.

Make an escape route

As with everything in life, things can go exactly how you didn’t plan them to. The same goes for working with any HTML based editor such as the Add/Edit posts screen has. While they are convenient to use, they are not MS Word, although they try to be to some extent. Because they can be flaky, you need to remember to save often, and perhaps create a copy of the text in another file.

If anything goes how you didn’t intend, try hitting Ctrl-Z to take back-steps and undo your prior changes one by one. If that doesn’t help, there is always the eraser function that will remove any HTML formatting from your currently selected text.

Let’s make some improvements!

Some of the things that I’ll want to do to my post are:

• Include an image at the very beginning of the post.
• Include a few hyperlinks to other sites, and to perhaps another post of mine. I covered this in the ‘writing a post’ lesson
• Finally, I’ll add a video to round things out. This will be lesson 7, soon to come.

Got it? Good. Let’s just get ‘er done then, yes?

The example post is nice, has some good info, a few bullet-list items and big bold headlines. A great starting point for further enhancing it with the above items I want to add. Here is what my post looks like in the editor at the start of our session:

Please note that I am on the compose tab, and not the ‘Edit HTML’ tab. This is very important and can be easily over-looked if you are not paying attention. If you are on the Edit Html tab, you might get some similar results, but they may not be the same as I am discussing here. Everything I do here will be done under the Compose tab.

By all means use the Edit Html tab if you are comfortable, and it doesn’t hurt to take a look inside for the sake of learning. Go ahead and take a look, scroll up and down to analyze what’s there. That’s how you should learn these things anyway, like an investigator. Just remember to first learn when you are causing changes and you’re not, and you’ll be fine. As long as nothing changed, you can simply click the Compose tab to come right back to where we need to be.

Moving on!

Adding an image

The first thing I’ll do is add an image to the post, and I want to put it at the very beginning. I also want the text to wrap around it, like a newspaper would do it. Here are the steps I take to accomplish this:

1. I’ll place the cursor right before the D in ‘Do you live…’ found at the beginning of the post (see above image). This indicates where I want to insert a new image.
2. Click the add image icon on the toolbar.
3. The following screen should present itself to you in a pop-up window:
   
   The interface allows you to upload an image from your computer and point to an existing image on the Internet. You can also specify if the image ‘floats’ to the left or right as well as the image size. For this lesson, we’ll just point to an image on our computers and upload them, we’ll also make it float too!
4. Clicking the ‘Browse…’ button under the ‘Add an image from your computer’ banner will display a standard ‘open file’ dialog box. Simply navigate to where the image is on your local system, select it and click the ‘Open’ button to close the dialog box.
5. You should find yourself looking at the upload file interface (item 3), but now you should see some text in the textbox next to the browse button you just clicked.
6. I decided earlier that I wanted the image to ‘float’ to the left and have the text wrap around the image. The images shown in the ‘Choose a layout’ show how the image will be inserted into the body of your post. You can see above that I have selected the ‘Left’ layout, which means my image will ‘float’ to the left.
7. Next, what size do I want to make the image? I have no clue. Let’s just add it in and adjust it later.

   You can also specify if you want to use this layout the next time you add an image. Either way, I recommend that you give everything a good once over for each and every image you add this way. Making this particular option somewhat irrelevant.

8. Click the ‘UPLOAD IMAGE’ button, and you should be presented with something similar to this:
   Ok, so perhaps you might have a better picture than the one I chose. Have you ever shaved your head and found that even though you have a nice shaved head (or so you’re told), and realize that your head, when held at just the right angle, looks more like an egg. Or perhaps a lemon when the shiny parts line up just right.

   Go ahead and click the ‘OK’ button to close the dialog.

   – OR –
   The upload failed. If you have the unfortunate experience of getting an error on upload, simply take a look at the error being generated. Here’s the screen I received when I tried to upload a file that is not supported:
   As you can see, the file I tried here failed to upload. The message states that ‘your image is corrupt or in in an unrecognized format’. Well, of course it is. Thumbs.db isn’t an image the last time I checked. Valid file types that you can upload are jpg, gif, bmp and png file types.
9. You should now see your image, albeit a nicer looking one for sure, within the body of your post. Like so:
   
   You’ll notice the bullets in my text are overlapping my image, that’s not cool. I’ve clicked the image once to make it the currently selected item. For my resizing pleasure, I get in return 8 control handles. Yes Virginia, control handles. Control handles are the little white squares around my image after I click it. If I click and drag one of the handles, it will make my picture larger or smaller. There are differences in the way each one resizes your image. Why not click and move one? You can always hit Ctrl-Z immediately after to return the picture to its normal position. Play around with it and teach yourself the different ways it will change the image by moving the various control handles.

Adding an image is pretty easy, as long as you do it methodically, step by step. If you ever make a mistake, start the image over. Sometimes trying to fix a problem in these editors will only make things worse.

At this point we have added an image to the post, played with our control handles and resized the image to better fit the space we are trying to place it. I have posted my changes and they’re live now on the Views on Life blog. I also added a little explanation for the image I chose.

You might also enjoy these related posts

1. Blogger.com Help – Lesson 4 – Writing a post with the post entry screen In this lesson we will take a look at the interface for writing our posts, as provided by Blogger.com. I’ll start by taking a look at the Blogger.com Create...
2. Blogger.com Help – Lesson 7 – Inserting video into a post I think it’s less worrying to use your own pictures and video when adding them to blog posts. Why worry about copyright when there is YouTube to grab videos...
3. Blogger.com Help – Lesson 5 – The Edit Posts Screen Editing your posts is one of those guaranteed tasks that goes along with blogging. In this post, I’ll take a look at the Edit Post screen and identify each...
4. Blogger.com Help – Lesson 8 – Basic Settings The basic settings tab provides you a certain amount of control over your blog. While you may not have full control, there are enough mechanisms put in place to...
5. Blogger.com Help – Lesson 17 – Page Elements Layout (Part 2) Due to this lesson potentially turning into a novel, I decided to split it into two parts. The first part covered the page elements layout navbar and header sections....