Align an Image in a WordPress Page

Ever wanted to float your images?

This means that the image sits flush against the left or right margin, and the text flows around it. Just like the Chapter 1 image to the right.

You can float images in a WordPress OM4 website using the alignleft and alignright classes.

Here is a short video that shows how to do it.

Got all that?

In words:

1. Edit your page or post in WordPress, and use the Upload facility to upload your image.

2. Make sure you are using Code View (if you are going to work with images more than a few times, its better to make this your default - change your User Profile to turn off the Visual Editor under the Users menu.

3. Position your cursor in the text of your post or page where you want the image to appear.

4. Send the image to the Editor. For blog posts, this will usually be at Full Size, and not linked to anything (so you are just showing the image in your post).

5. You will see an image reference that looks like this:

<img src="http://om4.com.au/wp-content/uploads/undara-snake-bat-250.jpg" alt="Snake hunting microbat" />

6. To make this image align to the right, add class=”alignright” to the image reference. You can do this before the src= or before the alt= - it doesn’t matter which.

<img class=”alignright” src=”http://om4.com.au/wp-content/uploads/undara-snake-bat-250.jpg” alt=”Snake hunting microbat” />

7. Save your post or page and view it. The image will be aligned to the right, and text will flow to the left.

8. If you want to align to the left, use class=”alignleft”. To center, use class=”aligncenter”.