How to mark a image attachment as background image?

Question

I am trying to add a functionality to mark a post's attachment id as a background image. Basically, I would like to replicate the post thumbnail functionality: in the image attachment details, the user would click on a "Use as post background" link / button, and that image would be set as the post background.

I've been googling to find something similar to custom fields but for image attachments, but have not found anything. Any ideas?

Answer 1

You could use the plugin "Custom Field Template" to replace standard custom fields with a much easier to use interface, that also allows you to use checkboxes, selects, textareas with tinymce, and file uploads among others. Then the client would just upload the image through that field and you use

<?php
    $bg = wp_get_attachment_image_src(get_post_meta($post->ID, 'custom_field_name', true),'original');
?>

to get the file information. that will return an array, and the image url will be the 0 value. You then do:

<?php
if(isset($bg) && $bg != '')) {
   echo '<div style="background:url('.$bg[0];.');">CONTENT</div>';
}
?>

Answer 2

Here's how i did it:

1- i created a post with a custom field name bg-pic and as a value i entered the url of the picture i just uploaded.

2- in content.php the php to retrieve the value and a button:

<?php the_excerpt();
$bg = get_post_meta($post->ID, 'bg-pic', true); //retrieve the value
if($bg) { //if there's a value i show the button ?>
        <a class="test" href="<?php echo $bg; ?>" >Use bg</a>
<?php } ?>

3- in footer.php the javascript to load the image in the background (in the domready):

$(".test").click(function(){
    var bgvar = $(this).attr("href");                     
    //alert (bgvar);
    $("body").css("background", "url(" + bgvar + ")" );
    return false;
});

4- Check that you got jQuery included and test it.

Hope this helps.