As I’ve mentioned before, I’ve been having great fun with the new Nometet.com design. It’s now sporting a feature that allows the author to set a custom background for the post just by uploading an image. This image doesn’t even need to be the correct size; that’s all done on the fly. Uploading isn’t hard either; I’ve implemented an uploader that sits inside a meta box so the hardest bit is choosing the image! In this post we’ll have a look at how it’s done.

The uploader we’re going to be using later saves the image URL to a custom field, so first we’re going to get the custom field set up so that all you have to do is input a URL into the custom field and it gets displayed as the background. As I’ve shown before, it’s fairly easy:

<?php
$bg = get_post_custom_values("background");
if ( is_array($bg) ) { ?>

<style type="text/css" media="screen">

body{ background: url(<?php echo $bg ?>) fixed no-repeat; }

</style>

<?php } ?>

But that still means you’ve got to resize the image and copy out the URL into a custom field.

Custom meta uploader

We need an uploader in a meta box. When I was first pondering how to do this, I remembered that WooThemes use(d to use?) them in their themes. So I opened up one and lo and behold, there was a file admin-custom.php (under /functions). This is the bit used for the uploader and other custom meta boxes.

At this point I got slightly confused – at the top of the file it says:

This code is protected under Creative Commons License: http://creativecommons.org/licenses/by-nc-nd/3.0/

Which is completely contradictory to Woo being GPL and as the file is dependant on WordPress, I’m fairly sure it needs to be GPL too. Either way, as I see it I can still publish the code here. To be totally safe, I’m not going to “alter, transform, or build upon this work”. This does mean we’ve got some code we don’t strictly need, but it won’t have too much of a disastrous effect!

As it’s a fairly big file, you can download it here.

Once you’ve got the file, copy the whole thing into your functions.php file, making sure it goes directly after the closing ?> tag (ie ?><?php ).

We then need to trigger the meta box, which can be done with the following:

$woo_metaboxes = array(

		"image" => array (
			"name"		=> "bg",
			"label" 	=> "Background",
            "type" => "upload",
			"desc"      => "Automatically resized/enlarged but at least 1000px x 800px for it to be big enough."
		),

	);

update_option('woo_custom_template',$woo_metaboxes);   

Add that after the other code, but before the closing ?> tag. Save the file, upload it and create a new post. You’ve now got an uploader which will save images into the custom field ‘bg’.

Resizing the images

The final thing to do now is to just use timthumb to resize the images to a width of 1920px. Simple enough; download timthumb, upload it into your theme’s files and just apply the timbthumb syntax to the code in the header:

body{
background: url(<?php bloginfo('template_url'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo $bg; ?>) fixed no-repeat;
}

And as you can see, that… doesn’t work. The custom field adds http://… to the image URL which timthumb doesn’t like.

At this point, I pondered a bit, tried (and failed) at a couple of solutions so did the only thing I could; grovelled with Ben to give me a hand. Thankfully, he agreed and told me I needed to encode my URLs, which means you’ll need to change the code to this:

body{
background: url(<?php bloginfo('template_url'); ?>/tools/timthumb.php?w=1920&zc=1&src=<?php echo urlencode($bg); ?>) fixed no-repeat;
}

And finally

Which leaves us with a really easy to use custom background uploader. You can check it out in action on the new look Nometet! Speaking of which, I’d really appreciate it if you gave the site a look; it’s a web based video game magazine.