How To: Format Images in posts beautifully

ADVERTISEMENT

Images add scenic beauty to posts (unless you include really bad images). Most bloggers advise you to include images at the at or around the beginning of your posts. And I am no different.

However, one thing that those advice does not contain is how to include images which blend well with the content, yet be noticeable by a reader. Selecting the right image is important, but so is the way you place them. Including an image with an uninspiring <img src=”" / > tag is just not in anymore - they’re so web 1.0/year 1998.

I prefer to use centered images, with the width slightly less than your post area width. This example shows you how to center the image, and add caption.

What you need now is a sensible, easy way to format images, without spending the whole day on it. This can be achieved by a combination of two things - a CSS styling rule to be added to your style.css, and some HTML code which you have to wrap around your image.

Note that this cannot be used for images previously added, without editing them. The reason: while CSS styling rule affects all elements, HTML markup has to be manually added around each image.

Add this code to your style.css file, towards the end:

div.ci { text-align: center; margin: 0; padding: 16px 0; padding: 0; border: none; }
div.ci small { font-size: .9em; line-height: 1.4em; color:#777; padding: 7px 0 0 0; }

The code above is the styling rules which help you to position the image. To apply the styling, we need to use HTML around the image tag. The HTML code is as follows:

<div class="ci"><img src="URL_TO_IMAGE" alt="ALT TEXT" /><br />
<small>YOUR CAPTION</small></div>

In the code, replace URL_TO_IMAGE with the image URL, ALT TEXT with what you want to show when the image is not displayed, and YOUR CAPTION with the caption that you want.

Alternatively, you can remove the caption, by using this code:

<div class="ci"><img src="URL_TO_IMAGE" alt="ALT TEXT" /></div>

Remember to tweak the caption colour, size and font to your liking, and your images will rock!

September 28th, 2007 Leave a comment