OK Sushi

Styling Wordpress Images

Posted on Tuesday May 5, 2009 in Work

No doubt if you have used Wordpress for a website, you have used it’s WYSIWYG to insert images into posts. The class names that it gives images is pretty bad:

• Want the image floated left? You get the class name ‘alignleft’
• How about right? You guessed it: ‘alignright’
• What about if you want it displayed in the centre of the post? Try ‘aligncenter’ on for size

Styling these tags

So, depending on your styles, you’ll want something like this:

	.alignleft {float: left; margin: 0 1em 1em 0;}
	.alignright {float: right; margin: 0 0 1em 1em;}
	.aligncenter {display: block; margin: 0 auto 1em auto;}

The above styles pretty things a little bit. However, what happens if you have a rogue person editing your content who uses the ‘align’ attribute on your images? How can you standardise the display of images?

Using attribute selectors, it’s pretty easy:

	.alignleft, img[align=left] {float: left; margin: 0 1em 1em 0;}
	.alignright, img[align=right] {float: right; margin: 0 0 1em 1em;}
	.aligncenter {display: block; margin: 0 auto 1em auto;}

In the perfect world that I dream of, no CMS would allow people to use ‘align’ on images (or any other element), but in the immortal words of John Bender: Screws fall out all the time, the world is an imperfect place. http://www.imdb.com/title/tt0088847/quotes (that’s from the Breakfast Club)