Having Trouble Aligning Images Left or Right in WPMU?

The GUI for inserting images seems to readily accept left and right floats (or the deprecated “align”), and if you use the Advanced tab in the add image dialog box you even get the option to add custom styles to the image such as a margin around the image. This looks very full featured, and so easy for the novice.

Unfortunately, many of the older templates currently on offer do not have the CSS necessary to implement the approach this version of WPMU takes. Atahualpa, the theme I’m using in this blog (today), does seem to contain the CSS necessary to handle the float issue with ease.

Frustrated by the teaser of left/right alignment of images and text wrapping nicely around it, and remembering a journalism colleague’s words that WordPress Multiuser didn’t work so well for his journalism class because they couldn’t make the text wrap around the images, I took a little time yesterday to fix this problem using the DIV element and an inline style.

What to do:

Insert your image and size it as you see fit. Don’t bother to align since it won’t work, at least not for many of the templates. (Alternatively, try the alignment. If it works, no sweat. If (When?) it doesn’t work, read on.
Once the image is nestled in your page or post, select the HTML tab. You’ll see something like code describing the presentation of your image and any associated caption.
Put a <div style=”float:right;”> at the front of that code-like stuff to float your image to the right and have text wrap to the left. Use “float:left;” for the reverse effect.
Put a </div> at the end of that code-like stuff to close the DIV element and effectively wrap your image within an inline styled DIV element that applies a float to your image.
Save your Draft, Preview your page, and if all is well, Publish!

Here’s the code in action.

Lorum text wrapped to the left of a right-floated image

I’ve added a left margin of 10px to keep text from running into the image box (Atahualpa doesn’t seem to do well with a margin added via the dialog box)

Google Chrome Joins Browser Wars

Proin id libero est, vitae mollis magna. Integer laoreet, libero vel pharetra consequat, enim mauris bibendum sapien, a cursus sem turpis ac augue. Nam eu risus tortor. Quisque ac felis eros, at accumsan lorem. Pellentesque ut tellus purus. Vestibulum feugiat ultrices tempor. Curabitur tincidunt ornare lorem eget venenatis. Praesent varius dapibus justo a tincidunt. Etiam iaculis erat at nulla consequat et mollis nisi gravida. Aenean eleifend scelerisque nibh, ac ultrices nunc consectetur nec. Quisque gravida, arcu congue auctor semper, nibh arcu hendrerit dui, ut fermentum dolor nulla tincidunt lacus. Aenean nunc enim, lobortis eget pretium eget, ornare vel nulla. Suspendisse luctus laoreet quam, sit amet tempus leo elementum sit amet. Cras dolor metus, adipiscing ut dignissim quis, mattis vitae eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras rutrum odio eget enim consequat volutpat tincidunt massa cursus. Suspendisse elementum lobortis lorem et lacinia. Nunc feugiat hendrerit risus, a fermentum urna tincidunt eget.

Lorum text wrapped to the right of a left-floated image.

I’ve added right margin of 10px to keep text from running into the image box (Atahualpa doesn’t seem to do well with a margin added via the dialog box).

Google Chrome Joins Browser Wars

This is all much easier than it seems to be, really.

The right way to do this is to add the missing CSS, something that’s not possible given the limited admin capabilities in WPMU. Of course, that’s the whole point of this sandbox test of WPMU! What can – and can’t – you do in WPMU?

Given what I can do with this limited admin offering, the inline approach strikes me as a reasonable workaround!

Will students take the time to do this? Will they care about floating an image to the right or to the left? Hmm.

WordPress mu Blog Sandbox

Testing WPmu’s potential for e-portfolio, from a limited admin perspective