Breaking Out of Wu Wei
October 6, 10 //
0

Wu Wei isn't some notorious prison in Shanghai it's a free WordPress theme by Jeff Ngan. It's beautiful, clean and did I mention it's free?
You're soaking in it now.

The only problem comes when you want to break out of the tight content column for something like a picture or code. Never fear Jeff thought we might so provided a means to allow us to do exactly that.

It's fairly easy to do, if a little too tightly coupled for me.
Here's what you do:
Instructions

You'll want to modify your image to be 580 pixels or 700 pixels wide for optimal scaling and to cut down on your bandwidth. If you use the 580 pixel size you'll be using "pull-1" while "pull-2" is for images 700 pixels wide.

Insert your photo as you normally would into your post.

Switch to HTML view from Visual if not already there (the tabs above the post editor).

You'll want to look for your image in your post so you know what to edit. You should see something like:
<img src="http://yourwebsite.com/wp-content/uploads/2010/10/05/yourimagefile.jpg">

More than likely that image tag will be wrapped by one or two other tags: a comment tag and/or an anchor tag. You're going to put the "pull-1" or "pull-2" class name inside the outer most tag.

For my example I'm going to use a beautiful photo of a bridge in Poland by Łukasz Drewniak. I'm also going to use the pull-2 class because I want as large an image size as will work within the theme's grid.

Here's what my original image HTML looks like:
[caption id="attachment_882" align="alignnone" width="700"
caption="Kotlaski Bridge - Krakow, Poland"]
<a href="http://picklepumpers.com/wordpress/wp-content/
uploads/2010/10/Kotlarski_bridge_700.jpg">
<img src="http://picklepumpers.com/wordpress/wp-content/
uploads/2010/10/Kotlarski_bridge_700.jpg"
width="700" height="447" class="size-full wp-image-882" />
</a>[/caption]

Don't freak out if that looks like gobbledygook to you. It might look like a whole lot of nonsense if you're unfamilier with HTML so I'll simplify it and show you exactly what to do for each case and I'll highlighted the changes so you can better see them.

All you have to do is insert the bold text into your image HTML in the appropriate place like so:

With a caption:
[caption id="attachment_882" align="alignnone pull-2" width="700"
caption="Kotlaski Bridge - Krakow, Poland"]
<a href="http://picklepumpers.com/wordpress/wp-content/
uploads/2010/10/Kotlarski_bridge_700.jpg">
<img src="http://picklepumpers.com/wordpress/wp-content/
uploads/2010/10/Kotlarski_bridge_700.jpg"
width="700" height="447" class="size-full wp-image-882" />
</a>[/caption]

Without a caption:
<a href="http://picklepumpers.com/wordpress/wp-content/
uploads/2010/10/Kotlarski_bridge_700.jpg" class="pull-2">
<img src="http://picklepumpers.com/wordpress/wp-content/
uploads/2010/10/Kotlarski_bridge_700.jpg" width="700"
height="447" class="alignnone size-full wp-image-882" /></a>

And finally just the image itself:
<img src="http://picklepumpers.com/wordpress/wp-content/uploads
/2010/10/Kotlarski_bridge_700.jpg" width="700" height="447"
class="alignnone size-full wp-image-882 pull-2" />

When you're all done you'll have a nicely centered image that's broken out of the main frame like so:

Kotlaski Bridge - Krakow, Poland.