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.

Is this possible to do?

I love how the new uploader works. I'm guessing it has to do with a jQuery call like the other way did.

EDIT

This is the code I am currently using

jQuery(document).ready(function($) {
$('.custom_upload_image_button').click(function() {
    imageField = $(this).prev('input');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
});
window.send_to_editor = function(html) {
    imgurl = $(html).attr('href');
    $(imageField).val(imgurl);
    tb_remove();
};
$('.clear_field').click(function() {
    var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
    jQuery(this).parent().siblings('.custom_upload_image').val('');
    return false;
});
});
share|improve this question
add comment

4 Answers 4

up vote 8 down vote accepted

To get you started, the basic functions and overrides as far as I know currently.There might be better solutions, but I only had two days with 3.5 yet:

// open modal - bind this to your button
    if ( typeof wp !== 'undefined' && wp.media && wp.media.editor )
        wp.media.editor.open( ##unique_id_here## );

// backup of original send function
   original_send = wp.media.editor.send.attachment;

// new send function
   wp.media.editor.send.attachment = function( a, b) {
       console.log(b); // b has all informations about the attachment
       // or whatever you want to do with the data at this point
       // original function makes an ajax call to retrieve the image html tag and does a little more
    };

// wp.media.send.to.editor will automatically trigger window.send_to_editor for backwards compatibility

// backup original window.send_to_editor
   window.original_send_to_editor = window.send_to_editor; 

// override window.send_to_editor
   window.send_to_editor = function(html) {
       // html argument might not be useful in this case
       // use the data from var b (attachment) here to make your own ajax call or use data from b and send it back to your defined input fields etc.
   }

This is not complete working answer. You have to define and keep track of your input fields by yourself etc.. This just should get you started. If you have more concrete questions, just ask.

And make sure to reassign the original functions when your script is done.


Pulled from comments:

How can I listen to the close event of the lightbox?

// add listener: 
wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); }
share|improve this answer
    
Thanks! I can't seem to get it to work though. I pasted what I have been using for the old media uploader above, if that helps. –  ftntravis Dec 12 '12 at 18:16
    
Ipstenu and the support team have put together a master list of issues (wordpress.org/support/topic/…) being reported for WordPress 3.5. This thread is not meant to have any user feedback but is a curated thread that quickly highlights the known issues being reported as well as instructions on how to fix the problem. –  Tara Dec 12 '12 at 20:24
    
How can I listen to the close event of the lightbox? I need to trigger a custom function if someone doesn't choose a new image –  revaxarts Dec 13 '12 at 16:34
3  
// add listener: wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); } –  ungestaltbar Dec 13 '12 at 22:16
add comment

Here is a small tutorial on how to use WP 3.5 media uploader in theme options. That's what I came up with and it works perfect for me. Let me know if you come up with any better solution.

Here is how I have implemented the code in my theme options:

jQuery(document).ready(function($){
  $('.stag-metabox-table .button').click(function(e){
  var send_attachment_bkp = wp.media.editor.send.attachment;
  var button = $(this);
  var id = button.attr('id').replace('_button', '');
  wp.media.editor.send.attachment = function(props, attachment){
    $("#"+id).val(attachment.url);
    wp.media.editor.send.attachment = send_attachment_bkp;
  }

  wp.media.editor.open(button);
  return false;

  });
});

Update

This code works only on post edit page. To make it work on theme options page you need to add wp_enqueue_media();

share|improve this answer
add comment

I'm doing almost the same it's not ready yet but it works:

in the php:

<input id="default_featured_image" type="text" size="100" name="default_featured_image" value="<?php echo esc_attr( $value ); ?>" />
<?php
do_action( 'media_buttons', 'default_featured_image' ); // second argument is the same as the `<input>` id

The javascript:

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

window.send_to_editor = function (html) {
    var imgurl = jQuery('img', html).attr('src');
    console.log(jQuery('img', html));
    console.log(html);
    console.log(imgurl);
    // set the url as the value
    jQuery('#default_featured_image').val(imgurl);
    tb_remove();
};

This will enable you to upload and send the image url (of any size) to the <input> element.
I'm trying to do this as a setting it and it works, Only thig I need now is a reliable way to send the attachment ID to the <input>

share|improve this answer
    
Thank you sooooooooooooooooooo much!!!! This finally worked after 2 days of desperate hunting for the solution!!! Thanks a ton!!! –  Devner Feb 25 '13 at 7:24
    
you might wanna take a look at the source code of this in my plugin: wordpress.org/extend/plugins/default-featured-image –  janw Feb 25 '13 at 9:35
add comment

I think @janw has got this one completely right, but I was unable to make one thing work. Jan inserts the media library button using:

do_action( 'media_buttons', 'default_featured_image' );

and then pre-empts the default action using:

jQuery('#default_featured_image_button').click(function () {...

The problem that I ran into is that inserting a media button in this fashion does not assign an id of "default_featured_image_button" to the link. In fact it does not add any id on the inserted link. So this is what I did to get it to work.

I added this line to my meta box callback function just after my input field:

<input id="upload_logo_button" type="button" value="Media Library Image" class="button-secondary" />

I then enqueued my custom jquery file and the thickbox css file, also in my functions.php file, using:

add_action('admin_enqueue_scripts', 'jhsir_load_image_set_js');

function jhsir_load_image_set_js() {
    wp_enqueue_script( 'jhsir_image_set_script', get_stylesheet_directory_uri() . '/js/image-set.js', array('jquery','media-upload','thickbox') );
    wp_enqueue_style( 'thickbox' );
}

Finally my image-set.js file included the following:

jQuery(document).ready(function($) {

    var formfield = null;

    $('#upload_logo_button, #upload_background_button').click(function() {

        $('html').addClass('Image');

        formfield = $(this).prev('input').attr('name');  
        formfield_id = $(this).prev('input').attr('id'); 

        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
        return false;
    });

    // user inserts file into post.
    // only run custom if user started process using the above process
    // window.send_to_editor(html) is how wp normally handles the received data

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function( html ) {
        var fileurl;

        if(formfield != null) {
            fileurl = $( 'img', html).attr('src');

            $( "#" + formfield_id ).val(fileurl);

            tb_remove();

            $('html').removeClass('Image');
            formfield = null;
        } else {
            window.original_send_to_editor(html);
        }
    };
});

You will note that I used variables to store the name and id of the input field that is just prior to the link that calls the jQuery. In that way this code can be used repeatedly on the same page. You would just need to assign a class to all buttons or use individual id's for the buttons in your jquery as I did. I hope this helps someone as Jan's answer did me.

share|improve this answer
add comment

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.