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.
hmm,realy useful thing.
thanks
Hello, I’m blundering my way through building a wordpress site with this feature, but can you expound a bit on where to put the
body{
background: url(/tools/timthumb.php?w=1920&zc=1&src=) fixed no-repeat;
}
code? You say “in the header”, but where am I looking? css? php?
Thanks in advance…
This does look awesome. Q on the images …
– You got the size set to 1920px. So if an image is uploaded that is smaller than 1920px it gets scaled up?
Brilliant. About to start major changes to my blog and this fits in beautifully.