Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to auto-populate an image on a theme page using the native Wordpress media uploader, but I want the image to populate before the option is saved. With the code below, the url to the image is populating correctly into the input field automatically, but I cannot figure out how to get the image to display:

<td>
  <label for="upload_image">
      <input style="float:left; width:80%" id="upload_image" type="text" name="upload_image" value="<?php echo $options['upload_image']; ?>" />
      <input style="float:right" id="upload_image_button" type="button" value="Upload Image" />
  <br/>

  <img id="upload_image" name="upload_image" src="<?php if ($options['upload_image'] != "" ) { echo $options['upload_image']; } ?>" />
  </label>

</td>

ADDED CODE:

Here is the script for the #upload_image_button

jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').attr('name');
 tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#upload_image').val(imgurl);
 tb_remove();
}

});
share|improve this question
    
This has to be solved with jQuery. Where is the rest of the code? The part that takes care of #upload_image_button –  brasofilo Jan 21 '13 at 1:27
    
I'm going to assume the old thickbox, but since this is a theme I'm going to need it to accomodate both. What code would accomplish this? –  Rob Myrick Jan 21 '13 at 1:31
    
Okay, I posted the code.....take a look –  Rob Myrick Jan 21 '13 at 1:34
    
Use a dollar sign in jQuery(document).ready(function($){});, so inside the function you can refer to jQuery() as $(). –  brasofilo Jan 21 '13 at 1:43
    
brasofilo - the image uploader is for 3.5.....your code didn't work. So do you have any leads on code for the new 3.5? –  Rob Myrick Jan 21 '13 at 1:56

1 Answer 1

up vote 0 down vote accepted

In the same call where the image URL is being sent to the editor, you fill up another div with an image source.

Like:

window.send_to_editor = function(html) 
{
    imgurl = jQuery('img',html).attr('src');
    jQuery('#upload_image').val(imgurl);
    imgsrc = '<img id="upload_image" name="upload_image" src="'+imgurl+'">';
    jQuery('#image-holder').html(imgsrc);
    tb_remove();
}

PS: this is for the Old Thickbox, not for the New 3.5 Uploader, which has very few examples nowadays.

[update]
In the original theme page code, the image should be wrapped in:

<div id="image-holder"><img id="upload_image" name="upload_image" src="<?php if ($options['upload_image'] != "" ) { echo $options['upload_image']; } ?>" /></div>
share|improve this answer
    
@RobMyrick, did you debug this? ::: console.log('the image source is = ' + imgsrc); ::: Does #an-empty-div corresponds to an existent element? ::: AFAIK, the Javascript you posted is for the old uploader and this window.send_to_editor should be doing its work. –  brasofilo Jan 21 '13 at 2:01
    
Sorry, brasofilo, I don't know anything about jQuery so I'm confused as to exactly what I should be doing. We are almost there I'm sure! –  Rob Myrick Jan 21 '13 at 2:07
    
Okay, I just finally understood what you meant by Does #an-empty-div corresponds to an existent element?, so I added an empty div with that id and the code worked. Thanks man! Btw, you answer quite a few of my questions - are you a theme developer? –  Rob Myrick Jan 21 '13 at 2:12
    
Plugin developer ;) Nice that you figured it out, I've updated the answer, so any future visitor won't have the same doubt. –  brasofilo Jan 21 '13 at 2:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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