Adding and Styling an Image

Images, photos and charts or graphs can be the spice that add that extra bit of flavor to your blog posts — making the difference between a fast food filling, hit-and-run meal or the long - remembered, savory satisfaction of fine dining.

So, in addition to the feast of your words, why not give your readers a little added kick. Plus, it’s easy to do if you follow this simple recipe.

Adding the Image

Within the page|post editor, click add media:

   

Figure 1. Click the Add media icon to start the process.

Select the image from your local computer:

   

Figure 2. Click “choose files…” to upload a photo or graph from your computer.

One you’ve selected an image, photo, chart or graph, you’ll see the following dialog. Take these 3 actions:

   

Figure 3. Inserting the image.

Step 1. Set the link on the image to NONE.

Step 2. Set the size of the image to “full”.

Step 3. Insert the image into your post.

You should see your image in the post editor.

Styling the Image with a Border

Now, let’s make it look better with a border. Borders are controlled by adding a style to the image. Fortunately, this is made easy through one of the handy controls in the editor. First, select the image by clicking on it. Next, select the “image editor” control:

   

Figure 4. Click on the image to select it, then click the image editor control.

You should see the following dialog. Note the last option - “class” (you can ignore the rest, although giving your image and accurate description will help you with SEO).

   

Figure 1. .

The class attribute tells your site how to present the image and luckily we’ve made it easy for you with these four styles:

• frame = puts the frame on. It’s a Good Thing (although not absolutely necessary) to use this class on all your images.
• block = Forces text near your image not to wrap. This is a good idea in those instances where your image is greater than half the articles standard width but less than its full width. This will prevent text from wrapping around the image in a column of text that will be too skinny (when this happens it looks just plain goofy).
• left = aligns the image left. Text will wrap around right side of the image.
• right = aligns the image (you guessed it) right. Text will wrap down the left-hand side of the the image.

Which style you want to use depends on the initial size of your image. I’d generally recommend sticking with images that are either full (440 pixels wide) or half (210 pixels wide) size for best results. Notice in the sample the nice visual balance between the two “columns”.