On the Floor

Wordpress: know it, love it. One of the largest publishing platforms in the world, used by everyone from CNN to Kobe Bryant to some guy in Provo who really likes Tetris Party. Wordpress: something for everyone.

Where Wordpress really starts to fall apart is in the image-handling department. It's pretty easy to make and embed image galleries and to put images directly into posts. No sweat. If that's all you want to do, stop here. You're good.

If you want to do anything more ambitious - say, attaching an image directly to a post and then pulling it out later at a predetermined size for use in your template - then read on, intrepid Wordpresser.

First, you're going to want to find and install a plug-in called Custom Field Template, written by Hiroaki Miyashita. The site for it is entirely in Japanese, but the plugin itself is so straightforward, you won't need to learn a foreign language.
(Note: if you already speak Japanese, you're ahead of the game! おめでとうございます!)

Once it's installed, you'll see a plug-in settings page like this:

Aww geez - that looks complicated! Luckily, we can ignore 90% of that jazz and concentrate on the part that says Template Content. This uses some custom markup to indicate what kind of hooks we're adding to posts and pages. This entire system uses Wordpress' existing 'custom fields' system, so if you decide later that Custom Field Template isn't for you, you're not locked into anything.

Let's make an upload field for our image attachment. Insert the following into the Template Content box.

[image-upload]
type = file
label = Hey, I can upload an image!

The part contained in the square brackets is the name of the Wordpress custom field that the uploaded image will be associated with. If it doesn't exist, it'll get created when you upload an image - zero configuration! The type = file part tells the plugin to throw up a file upload box for us, and the label is to tell you what this is all about. If you're uploading more than one image to a page or post, this would be a good place to put a reminder, like "Upload the header image! Remember: it has to be at least 440px!"

If you check out your 'New Post' or 'New Page' pages, you'll now see something like this:

.. and once you've attached an image to your post, it'll look like this:

The image is associated directly with your post or page. Fantastic!

But wait - 'shopping images really sucks! You've got better things to do, like write your next opus of a blog post. No time for fooling around with image editors! Not to worry. Wordpress has an image-crunching algorithm built-in. Check Settings > Media.

Put in your digits. In this case, we've got a medium-sized image of 440 pixels width - the zero indicates it'll resize the height with respect to the width, rather than a fixed, absolute image size. Handy! Obviously these values should be tailored to fit your templates.

By setting these settings, you never need to run through another Photoshop gauntlet to make a new header image, byline, or whatever for your site - all the image-finessing action is handled by raster-happy pixies on the server.

So we've got the image attachment. We've got the image handling done on the server. How do we get the size we want into our site?

All it takes is a big ball of front-end PHP. Part of really digging into the guts of Wordpress consists of chaining together some of Wordpress' internal functions. Not all of them make sense (if you've ever run into one of Wordpress baffling gaps in obvious functionality, you'll feel my pain) and a lot of them are poorly documented. Think of this as a nugget of code, freed from the code mines.

If you're a programmer by trade and not merely by circumstance, this might be perfectly obvious. That being said, pulling out attached images from Wordpress seems to be a bone of contention on the web at large, so I'm sharing this in the hopes of a brighter, happier Wordpress-templating future. Are you ready? Here it is:

Urgh. Take a breath, it's not that bad. Let's break this down.

So here we're merely telling Wordpress what we want to pull out - the name of the custom field.

Hey Wordpress, remember that value I just gave you? Pull out the data in the custom field with that name, s'il vous plaît. (Yes, you could easily replace $key in this line with the value from the first line. This keeps things a little more parsable, in my opinion.)

Magic happens! Wordpress mashes up the post ID, the custom field value, and the size we want (medium), and pulls out a fully fleshed html <img> tag.

Finally, we nudge PHP to do some work and it turfs the aforementioned tag into your template.

There you have it - three pretty simple steps to make Wordpress into a macho powerhouse of image storing, styling and serving.