I’ve created a custom site options page as a top-level admin page in my theme. The options are pretty basic but include a couple of images.

I initially found a lot of examples for using Media Uploader to upload or select an image on the options page. It was easy enough to implement and worked like a charm but had severely undesirable results.

Even though I could invoke the media uploader modal and add images back into my custom options page, “Insert into Post” broke on every other facet of WP. All posts, custom posts and pages could no longer have any string returned from Media Uploader when I clicked “Insert into Post”.

I think this has to be related to the window.send_to_editor function, here’s the javascript I used to call Media Uploader (I found it on many websites):

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

$('#upload_header_img_button').click(function() {
    formfield = $('#header_image');
    tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
    return false;
});

$('#upload_branding_img_button').click(function() {
    formfield = $('#branding_image');
    tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
    imgurl = $(html).attr('href');
    $(formfield).val(imgurl);
    tb_remove();
    var img_preview = $(formfield).parent().find('img');
    console.log(img_preview);
    img_preview.attr('src',imgurl);
}
});

After a lot of digging (read: comment searching) I found this function a fellow reader had provided as a possible fix: https://dpaste.de/T8ji and added it after my window.send_to_editor function. It worked, as in all my posts and pages had regained “Insert into Post” functionality, but now the Media Uploader is broken on my custom options page.

Has anyone run into this?

Post Views: 5

1 comment

I just ran into this. The reason is that you are overriding the window.send_to_editor function with one of your own. WordPress uses this function to insert galleries and other stuff, so now that you’ve changed it, it can’t.

Ideally’ you’d want to use an event triggered by the media uploader instead of just replacing the function, or at least replacing it temporarily while making a backup, something like this (the wp admin uses underscore.js):

myBtn.on('click', function() { 
    var bkSend = _.clone(window.send_to_editor); // we need a copy 
    
    //... My code

    window.send_to_editor = function(html) { 
        //... My custom things

        restore();
    } 
    
    function restore() { 
         window.send_to_editor = bkSend;
    }
});

Untested.

Ok so a tested and working version for my case:

    (function($) {
        $(document).ready(function() {
            $('#upload_image_button').on('click', function(e)  {

                e.preventDefault();
                e.stopPropagation();

                tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
                
                var bkSend = _.clone(window.send_to_editor);

                var restore = function(callBack) { 

                    window.send_to_editor = _.clone(bkSend);

                    callBack();
                };

                //console.log(bkSend);

                window.send_to_editor = function(html) {

            
                    imgurl = $(html).find('img').attr('src');
                        
                    $('#lc-slider-image')[0].src = imgurl;
                    $('#lc_slider_image').val(imgurl);

                    restore(tb_remove);    

                };

                //console.log(window.send_to_editor);
            });
        });
    })(jQuery);

I hope it helps some of the victims of that dreadful blog post that started all this madness.

I’m too busy to beautify that code and it certainly could be better so if someone could help me with that it would be great.

Comments are closed.

Related posts

1 comment

Ok so a tested and working version for my case:

Social Network