0

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!

  • More specificity in your question please. What have you tried? Any code? – Ignat B. Sep 14 '15 at 8:24
  • Hey Ignat, Thanks for the reply! I will edit my comment, should have been more explicit, indeed. Cheers! – Dorian Tudorache Sep 14 '15 at 8:32
  • DId you ever come up with a solution to this? – montrealist Dec 25 '15 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 Dec 30 '15 at 12:13
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

| improve this answer | |
  • I know how to enqueue files and I did enqueue the file with the above code. I need to know how to manipulate attachments in the browser. Thanks for your reply. – Dorian Tudorache Sep 14 '15 at 12:43
  • see my updated answer. – dev Sep 14 '15 at 12:54
  • Hey dev, Still not what I'm looking for. On upload.php page (Media Library), the attachments are output by backbone js. I cannot even select one of them using jQuery for example because they are all generated after all events have been fired. I need to access a callback inside backbone for that I assume. Try $('.attachment').hide(); in your script to understand what I'm talking about. – Dorian Tudorache Sep 14 '15 at 13:09
0

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);
| improve this answer | |
  • Hey Dave, Thanks a bunch for this but unfortunately I don't want to bind a function on an event but rather manipulate the rendered elements as they are. I guess nobody has an answer for that so I have just digging into Backbone, might come up with a solution myself quite soon. Cheers! – Dorian Tudorache Sep 15 '15 at 15:03
  • Thanks for replying Dorian, and I'm sorry for not being able to help out. Please post the solution if you've found one, I might be able to use it in the near future. – Dave van Hoorn Sep 15 '15 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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