How to format pictures in your blog

This post has been revised. The new post can be found at

http://activerain.com/blogsview/4282027/the-new-how-to-format-pictures-in-your-blog

There are a few steps involved in formatting your pictures in your blog posts. Luckily, they are all pretty easy, and a little fearless experimenting will get you the results you want. 

The main reason I'm offering this post now is that we are all starting to syndicate our blogs. You may have noticed that when you share your blog at another social media site or blogging spot, the formatting can change. My personal pet peeve is text that comes out hanging off the end of a picture. Things like that don't have to happen if you format your post here on AR with the syndication aspects in mind.

You can't edit the picture once it's uploaded, so check to make sure it's cropped properly. There's no point in uploading an image larger than 800 pixels on a side, so you might want to save big photos at a smaller size. There's also no point in including high resolution photos. Save them at the lowest resolution you feel comfortable with, but 72 is more than enough for anything in a blog post. 

To post a picture in your blog that will look the best on all platforms, go to the end of a line of text and hit enter, so your picture will post on an empty line. This one step solves the hanging text problem, and gives you much more flexibility and better results with other formatting options. You'll have to check on your particular pages, but this is the "Safety Sam" approach that will look good, though perhaps not what you'd most prefer, on all platforms. If you feel like looking at the html view (click on the icon in the top right corner of the menu bar), you should see

(paragraph mark) show up before the code describing the photo, and

afterwards.

When your cursor is where you want to insert a picture, click on the green tree on the right side in the menu bar. A dialogue box comes up.  Click on the menu icon to the right of the Image URL box (unless you really know the URL and can type it in!), and navigate to the picture you want to upload.

Now add an Image Description and an Image Title for the search engine web crawler bots. These words are important for SEO (search engine optimization). Bots can't see pictures, so these titles tell the bots about content of the photo. The title also shows up in the status bar or in a box near the cursor when someone scrolls over your photo. I just use the same words in both boxes. You'll want to focus on keywords and addresses, since you are mostly talking to the bots.

Now click on the Appearance tab at the top of the dialogue box. (I choose Alignment first, but I'll save the examples of that for a moment. (See On-screen placement and word wrap below.))

In Dimensions, you should take an initial stab at how big you want the picture to be on your screen. You have 640 pixels from left to right (horizontally) to work with. You can run a poster all the way across the screen and include type above and below the picture. Other than that, though, anything over about 300 pixels wide doesn't leave a whole lot of room for text -- if you want the text to run down the side of the picture. 

The first number is the width, the second the height (width x height). When you change one value, the other changes automatically to preserve the aspect ratio of your original photo (unless you uncheck the Constrain Proportions box: don't).

You can resize your pictures on screen. When you go back to editing your blog post, your picture will have little grab boxes on the corners. Click once on the picture and the grab boxes will appear. You can slide the dimensions around while leaving the picture itself in place. Be careful not to use the middle (side) grab boxes to change only the horizontal or vertical size unless you want to distort the picture. Use the corner drag boxes, moving diagonally, to preserve your aspect ratio (width v. height). 

Insert a number for the Vertical Space and Horizontal Space. This puts a boundary around your photo so that any text that runs nearby doesn't jam up against the photo. This little bit of formatting keeps your post looking clean and professional. 5 and 5 works well. 10 and 10 also. It's more important to include horizontal space in most cases. Most of the time, you really don't need any extra vertical space because the line kerning of your text (the height of the area that your text can occupy) has enough of a boundary built in.  Just take a look at your draft to decide. It's easy enough to click on the picture again and enter a new number that works.

Borders sometimes look good. I don't use them because I think most blogs look cleaner without them. If you want one, just pick a number. More than 5 starts to look really thick. Once you choose a size, you can also choose a color in the Style box at the bottom. The default is "solid black". Try inserting the name of any color and see if you like it.

If you don't like the standard color, you'll have to edit the six-digit hexadecimal color code in the html view. There are a variety of pixel pickers that can help you with this. I use Color Picker. Use the color wheel to find the hexadecimal name of any shade. Obviously, this is a pretty helpful utility.

You can Cut and Paste your pictures anywhere you want. Click on the picture. Hit Control-C to cut it, click again to insert it where you want to place it, HIT ENTER to make sure it's going on a new line, then Control-V inserts it.

• Please note that your font size will alter the relative height of your pictures: whether they bottom out at the end of a paragraph and so on. Put your 14-point type on (for example) before you check the alignment of your photos.
  
  
• One aside about font choice. You might want to post everything in 14-point font so it's readable by folks with glasses. I also steer away from colored fonts, serif fonts and italics, with a vengeance. I CAN'T read them easily. It's instant headache time for me, and I just go away and read something else. I'm not a personal fan of default Verdana, but there's a reason why it's the standard, and you vary from it at your own peril. Just sayin'.

You can give any photo an embedded link to anything you want. Just click on the picture and then click on the chain link icon that is now available in the menu.

On-screen placement and word wrap

The Alignment function on the Appearance Tab

Here's what you really want to know!

I'm going to go out on a limb and suggest that you usually want to Align Left or Align Right. Don't default to "Not Set": choose an alignment! The problem with alignments is that small differences in the way you insert the picture and apply formatting to the text can land your photo in slightly different areas of your html code AND/OR different html editors/platforms can interpret the coding that is used here on AR differently than AR's editor, resulting in odd discrepancies that give you the "That's not what I wanted" feeling.  Here are the basic options.

Not Set:

If you do nothing, the default is "Not Set", which looks like this ** when you put the photo between the asterisks and like this 

when you put the photo between carriage returns ("Enter" for those of you too young to remember typewriters!) I see a lot of the *former* and it's not a good look, except in rare circumstances. So if you go with "not set", please use Enter on both sides of the photo. Yes, it breaks up the text. The risk is hanging text that breaks up the page even more.

Left: 

1. If you align left without an Enter, it SHOULD look like *this (I inserted the picture while the cursor was between these asterisks)*. Add your picture AFTER you enter your full paragraph of text, otherwise the picture may keep shifting down the page as you add more lines of text. This is probably what you're looking for in most "align left" cases. Normally, the top of the picture aligns with the line of text you were writing (where the cursor is) when you uploaded the picture. Then the text wraps back to the left edge once the text reaches the bottom of the picture. 

2. If you align left with an Enter after the *, it looks like *

this. Without another Enter, you get . . . hanging text! The hanging text still wraps once you get underneath the picture. I don't know why people would want this result. I have to assume that they didn't know that's what they were going to get.

3. If you align left with an Enter after this *

* and before this one, you get this. This is the Safety Sam method. It obviously isn't the neat, wrapped result of Left #1, but every html editor will start a new paragraph after a

and end it with a

.

Right: 

1. If you put an aligned right picture *here*, you get this. Same as Left #1, this is a great result, and one that works most of the time. Sometimes, though, the result on other sites isn't as good. You can wind up with hanging text. Also, if you try to insert the picture before you're done typing the paragraph, the editor can keep shifting the picture down the page as you enter more lines of text. That's not what you want. There's a better way to do "align right".

2. Here's the better way to align right when you want the top of the text to align with the top of the picture. Write your paragraph first. Hit enter at the end. Now go back to the last line of the previous paragraph and put your cursor at the end of the line! Hit enter. NOW insert your picture and align it to the right. It will snap to the top line of your text and look that way on every html editor, everywhere. That's how I did this one. As you can see, the text wraps at the bottom.

Baseline:

Typing along. Then insert a picture *here* with baseline formatting. The photo appears on the baseline of the line of text where it was inserted. Keep typing until the text wraps and nothing changes. Keep typing until the text wraps again and then add another baseline photo, something like this: . . . and you can see what happens to the text.

Top and Text Top:

Typing along. Then insert a picture *here* with top formatting. The photo appears to hang from the top of the line of text where it was inserted. Keep typing until the text wraps and you can see what happens to the text.

Middle: 

Typing along. Then insert a picture *here* with middle formatting. The photo appears above and below the line of text where it was inserted. Keep typing until the text wraps and you can see what happens to the text.

Bottom and Text Bottom: 

Typing along. Then insert a picture *here* with bottom formatting. The photo appears to sit on the line of text where it was inserted. You can see the space it creates in the text above the picture.

Square and Inline: 

. . . Don't exist. With the AR editor, you can't sandwich a photo inside a square of text, or put a photo behind text. There are other ways to create these effects.

There are more settings in the dialogue box that are available but that really aren't necessary. Maybe someday I'll write about them.

Happy formatting!

*    *    *