Hook into backbone to add js to wp-admin -> media library?

I've enqueued a .js file on the "Media Library" page (upload.php). I need to hide and manipulate a few of the thumbnails on the page using JS only ( I'm not looking for workarounds ).

The elements on the page are being rendered by backbone and I have found no way so far to hook into it. In any window/document state, $('li.attachment').hide() function for example won't do it's job because of this.

I have tried going with the following piece of code, with no result so far, can't even debug the code because of unproperly hooking:

window.wp = window.wp || {};

( function( $, _ ) {

var media = wp.media,
    Attachments = media.model.Attachments,
    Query = media.model.Query,
    original = {};

original.AttachmentsBrowser = {
    manipulate: media.view.AttachmentsBrowser.prototype.manipulate
};

_.extend( media.view.AttachmentsBrowser.prototype, {

    initialize: function() {

        original.AttachmentsBrowser.initialize.apply( this, arguments );
    },

    manipulate: function() {
        var options = this.options,
            self = this,
            i = 1;

        original.AttachmentsBrowser.manipulate.apply( this, arguments );

        console.log('got here');  // Not outputting a thing
    }
});    

Any ideas how I should go about it?

Thanks a lot in advance!

I've enqueued a .js file on the "Media Library" page (upload.php). I need to hide and manipulate a few of the thumbnails on the page using JS only ( I'm not looking for workarounds ).

The elements on the page are being rendered by backbone and I have found no way so far to hook into it. In any window/document state, $('li.attachment').hide() function for example won't do it's job because of this.

I have tried going with the following piece of code, with no result so far, can't even debug the code because of unproperly hooking:

window.wp = window.wp || {};

( function( $, _ ) {

var media = wp.media,
    Attachments = media.model.Attachments,
    Query = media.model.Query,
    original = {};

original.AttachmentsBrowser = {
    manipulate: media.view.AttachmentsBrowser.prototype.manipulate
};

_.extend( media.view.AttachmentsBrowser.prototype, {

    initialize: function() {

        original.AttachmentsBrowser.initialize.apply( this, arguments );
    },

    manipulate: function() {
        var options = this.options,
            self = this,
            i = 1;

        original.AttachmentsBrowser.manipulate.apply( this, arguments );

        console.log('got here');  // Not outputting a thing
    }
});    

Any ideas how I should go about it?

Thanks a lot in advance!

• wp-admin
• media
• media-library
• backbone
• underscore

Share Improve this question edited Sep 14, 2015 at 8:42 Dorian Tudorache asked Sep 14, 2015 at 8:07 Dorian TudoracheDorian Tudorache 922 bronze badges 4

• More specificity in your question please. What have you tried? Any code? – Ignat B. Commented Sep 14, 2015 at 8:24
• Hey Ignat, Thanks for the reply! I will edit my comment, should have been more explicit, indeed. Cheers! – Dorian Tudorache Commented Sep 14, 2015 at 8:32
• DId you ever come up with a solution to this? – montrealist Commented Dec 25, 2015 at 19:48
• Yeah, pretty much... had to get into using backbone with underscore and things started to make sense in the end, looking at the piece of code above and makes me laugh. If you need help, shoot it, might be able to give you a hand. :) – Dorian Tudorache Commented Dec 30, 2015 at 12:13

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You can enqueue javascript files and css files like this for wp admin:-

    function load_custom_wp_admin_style() {
        wp_enqueue_script( 'script-name','js/scripts.js', array('jquery'), '3.3.5', true );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

First you need to enqueue admin scripts like below:-

 function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
}

function my_admin_styles() {
wp_enqueue_style('thickbox');
}

for uploading attachment:-

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

         window.send_to_editor = function(html) {
         imgurl = $('img',html).attr('src');
         tb_remove();
        }

I have used my code, you can modify it.

Thanks

I'm working on something similar. I've been selecting thumbnails (with jQuery) like in the code example below. Make use of jQuery's on function to hook functions to interactive elements (like the thumbnails).

// Edit
The code below will output the attachment ID in your console.

(function ($) {
    'use strict';

    // Wait for window to load
    $(window).load(function () {

        // Run function 'checkImageSelection' after clicking on .thumbnail
        $('.attachments-browser').on('click', '.thumbnail', checkImageSelection);

        // Function for checking the selected image
        function checkImageSelection() {

            // Get image ID
            var imageID = $(this).parents('.attachment').attr('data-id');

            // Console.log image ID
            console.log(imageID);

        }

    });

})(jQuery);