WordPress Image Alignment Basics

This entry was posted in geeky. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Both comments and trackbacks are currently closed.

Blogging Basics 101 has a great tutorial about changing image alignment in Blogger. Ukrainiac asked for suggestions for non blogger users (she is using WordPress), so I decided to bring out the geek in me and attempt to answer.

WordPress (I am using v. 2.2, I don’t know how it may be different in other versions) defaults to inserting your photos between paragraphs, but it is very simple in the visual editor to change your image options to float your image to the left or right and have your text wrap around it.

I took a screen cap to make it easier to explain, click on it and the image will open in a new window so you can see it in better detail.

Image Alignment Options

(Quick Tip: If you WordPress visual editor box is too small, click and drag the bottom right triangle to resize.)
Just as with text, you can use the center button (circled above) on the tool bar to center your photo, which many people probably find much more aesthetically pleasing than leaving the photo on the left. But this may leave a lot of white space on the sides you don’t want.

Instead you can “float” your image to the right or the left and have the text wrap around the image to one side. This is simple to do with the visual editor, without having to edit the code instead.

Click on your image to select it (I’ve circled part of the outline in my screen cap that indicates the image is selected). Then click on the image button – it looks like a tree (circled above). The insert/edit image dialog box will appear giving you a variety of options for manipulating your image. Just select the right or left option from the alignment drop down box and hit update to apply your changes. Add new text after the image and it will wrap automatically, or drag your image to the beginning of the line or paragraph where you want the wrapping to start.

frog_-_cartoon_16tn_.jpgLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

frog_-_cartoon_16tn_.jpgLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Here are some links to WordPress docs about using images:
Using Images
Wrapping Text Around Images