Graphic and Web Designer London UK

When writing a WordPress post it is extremely important to make it as visually appealing as possible. Visitors are much more likely to spend a bit of time on the page if it has a nice image and the text is laid out in a pleasing way.

Images are important in terms of SEO. If they are uploaded with correct and keyword-rich names and alt texts they can pull in a valuable amount of targetted traffic from image searches.

Adding an image with text above and below

Click the first icon top left after the words “Upload/Insert”, if you hover over the tooltip will be “Add an Image”. In the resulting dialog box you can click “Select Files” to get the image from your computer. (I would choose the Browser uploader rather than the Flash uploader). Once the image is uploaded you will see another dialog box with the image’s thumbnail displayed.

It will usually be a large image (of, say, 400 pixels or more wide) that you will want to put on it’s own after a paragraph of text. Make sure you have hit Return (once in Visual mode; twice in HTML mode) before clicking the Add an Image icon. And, after uploading, in the Adding Image dialog box, under Alignment, click “Center” (alternatively you can select the image and click the centered text button after inserting).

Adding an image with text flowing around

If you have a smaller image of, maybe, 200 pixels width, you may want to insert it into a paragraph with the text flowing around it. If so, make sure your cursor is blinking next to the word at the beginning of the paragraph you want the image to go in when you click the add image icon. And whilst in the Add an Image dialog box click, under Alignment click “Left” or “Right”.

Your image should always have a descriptive file name with no spaces and a .jpg, .gif or .png at the end. For the image here, left, I would use the file name “brown-bear-in-woods.jpg”. Upper and lower case letters are irrelevant here so it is best stick to lowercase and use hyphens to separate the words. Spaces will be converted to hyphens after uploading via WordPress. And, hyphens are better than underscores.

Alt text

Always try to write an Alternate text for the image. This is how you would describe the image to a blind person. So, in our example the Alternate text would be “European Brown Bear walking through the forests of Finland”. Remember, this is crawled by the search engines so put keywords in where appropriate! The Alternate text is in the Adding Image dialog box which appears after an image is uploaded.

Image size

One last thing to consider when uploading images is their size. If you want the image to be the same size as it is on your computer click Full Size under Size. If you want the image to be a different size you can choose Thumbnail, Medium or Large. You can change these sizes in Settings > Media.

Finally…

If you want to write a caption you may.

Lastly, click “Insert into Post”. If you’ve made a mistake you can always click the image in the Visual editor and click on the “mountain” icon, then click “Advanced Settings” and here you can change some of the above variables. Otherwise, delete the image and start again.

Image is not displaying to the left or right correctly or the caption does not appear close enough to image

Put this code in your theme’s CSS:

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

It says in the WordPress Codex that “Each theme should have these or similar styles in its style.css file to be able to display images and captions properly”. But I can tell you many themes don’t has this code in there. Probably because theme designers like to style images and captions themselves and don’t realise that WordPress can do it for you.

This concludes my post on inserting images to a WordPress post. If anybody has anything to add or thinks I have missed anything please comment away!

Related articles

This article was posted on Sunday, March 21st, 2010 at 7:05 pm and is filed under Internet, WordPress.
You can follow any responses to this article through the RSS 2.0 feed.