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

Question

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

Dorian Tudorache

2022年2月6日 08:06

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!

Topic backbone underscore media-library media wp-admin Wordpress

Category Web

Dave van Hoorn · Accepted Answer · 2015年9月15日 15:00

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

dev · Accepted Answer · 2015年9月14日 12:57

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&amp;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

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

About