4

On one of my custom posts edit page I have a button that triggers the media popup onclick, with: wp.media.editor.open(); and while it brings up the media manager I'm not sure if that's the proper way to do it. Is it?

But real question is about something else. How do I attach event listeners to various events that media popup should trigger? Like open or close or is there any event for switched view?

10
+50

You can use several event handlers.

frame.on('open',function() {
    // Do something
});

frame.on('close',function() {
    // Do something
});

frame.on('select',function() {
    // Do something
});

Where frame is a reference to wp.media()

frame = wp.media();

frame.on('select',function() {
    // Do something
});

Full example

Script en-queued with jQuery and media editor as dependencies.

function media_script_enqueue() {
   wp_enqueue_script( 'media-script', get_template_directory_uri() . '/js/media-script.js', array( 'jquery', 'media-editor' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'media_script_enqueue' ); // Front-end
add_action( 'admin_enqueue_scripts', 'media_script_enqueue' ); // Back-end

Script contains:

;( function( $ ) {
    var frame = wp.media({
         multiple: true
    });

    $(".media").on("click", function(e) {
        frame.open();

        e.preventDefault();
    });

    frame.on('open', function() {
        console.log("Open");
    });

    frame.on('close', function() {
        console.log("Close");
    });

    frame.on('select', function() {
        console.log("Select");

        var selection = frame.state().get('selection');

        selection.each(function(attachment) {
            console.log(attachment.id);
        });
    });
} )( jQuery );

Window triggered by a button with a classname of media

<button class="media">Media</button>

Media javascript dependencies enqueued via function.

<?php wp_enqueue_media(array('post' => get_the_ID())); ?>
  • do you mind making it fuller example? Where does this code goes, when should it be used (after load event, or is there some other trigger)? – Mark Kaplun Dec 2 '13 at 6:06
  • You would use the admin_enqueue_scripts action in your plugin or theme to enqueue your JavaScript files that create this functionality. The JavaScript given in Rob's example can be executed at the point where you open the media manager. – Bendoh Dec 3 '13 at 16:14
0

Last I checked the best documentation was the source code - see media-views.js, media-models.js here: http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-includes/js/

Experimenting with the console can be helpful - It's mostly backbone objects, you can watch events triggered using something like this script I made some time ago - http://userscripts.org/scripts/show/161075

  • Can you provide an example of how one is supposed to invoke your script (for backbone.js dummies...) – jayarjo Dec 3 '13 at 8:06
  • The eventslog is helpful to use like eventslog('backboneobj',backboneobj,3) or similar. – NoBugs Dec 4 '13 at 4: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.