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?

  • @Wyck I realize, but I dont think I should start accepting answers for the sake of it. That wouldnt make this a more useful website, dont you think? I think it was a mistake to make wordpress.stackexchange.com a separate site, I used to get much better wordpress answers on stackoverflow than here, sadly – 0al0 Oct 31 '11 at 18:03
  • I looked over the answers, some of them are accurate, wpse works just like the regular stack, this question has been answered on here multiple times, wordpress.stackexchange.com/search?q=media+uploader+meta+box – Wyck Oct 31 '11 at 18:32

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

    $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:

if(isset($bg) && $bg != '')) {
   echo '<div style="background:url('.$bg[0];.');">CONTENT</div>';
| improve this answer | |

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):

    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.

| improve this answer | |
  • Thank you, but the client requires a very easy interface to set the background, so requiring the user to find out the url of the image, and then pasting it into a custom field is too complicated for what they need. – 0al0 Sep 2 '11 at 11:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.