Aligning Images With Wordpress
Its been a while since I geeked up. I’ve been working the equivelent of one and a half full time jobs, and accidently bought a playstation 3 so geekness (unless it involves burnout chains 8 long) has taken the back seat (see I’m so enraptured by Burnout Paradise on our 46″ HD screen that I’m even talking through driving analogies!)…
So yeah - Picturegrid and SimpleLife are still in development, I made some changes this morning in fact!
It occured to me that my book entries looked a bit ugly - book cover, dates and review. Simple and plain, but a bit naff…. What if I could align the book cover and have it float inside the text? It got me thinking about some other posts where the image is small enough to float inside a paragrah of text….
Turns out its easy, if you’re happy editing the css of your theme….
Firstly you have to set up the right and left “styles” - the margin and padding help keep everything tidy, whilst the display: inline tag makes the text flow around it.
img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
You’ll also need to be using the following somewhere in your themes css….. now you could put the float tags inside the img.left/right styles but then they’d only be available for images aligned left and right. Set seperately, you’ll be able to quickly set anything to the left or right (although text won’t float around it).
.right { float: right; }
.left { float: left; }
So I guess there are plenty of examples now throughout my blog… all you need to do is insert the image tag with class=”left”.
<img src="animage.jpg" title="Yada" alt="Yada" class="left" />
For example this image is floating on the right - i used class=”right” so that it floats lovely and inline with the text floating all around it. Its quite a simple little fix that improves the layout of a post dramatically, which I’ll probably use on nearly every image i post - obvious exceptions are big images, or special images or image which plain just don’t fit inside text.
Filed by Kieran at March 25th, 2008 under Blog, Code, Geek!, Wordpress