wp.media edit attachment screen

by

I’ve read a couple of things about the wp.media object and have successfully initialised in the state that I can find to upload images. But for the plug-in that I am building I need to have the same layout as when I click my attachment in de media grid gallery.

For now this is my “simple” code that opens the default wp.media object

// Create a new media frame
        frame = wp.media({
            title: 'Select or Upload Media Of Your Chosen Persuasion',
            button: {
                text: 'Use this media'
            },
            multiple: false  // Set to true to allow multiple files to be selected
        });

        // Finally, open the modal on click
        frame.open();

What I need is the exact same result as you follow the url down below:

http://wordpress.dev/wp-admin/upload.php?item=10

Where you need to replace wordpress.dev with your own WP installation en item=10 to any attachment ID you actually have.

It should look like the following screenshot:

Screenshot of edit attachment

Is there anyone we has an answer or can send me into the right direction?

2 Answers
2

Long answer:
Peeking into wp-includes/js/media-models.js, I see this:

if ( 'select' === attributes.frame && MediaFrame.Select ) {
    frame = new MediaFrame.Select( attributes );
} else if ( 'post' === attributes.frame && MediaFrame.Post ) {
    frame = new MediaFrame.Post( attributes );
} else if ( 'manage' === attributes.frame && MediaFrame.Manage ) {
    frame = new MediaFrame.Manage( attributes );
} else if ( 'image' === attributes.frame && MediaFrame.ImageDetails ) {
    frame = new MediaFrame.ImageDetails( attributes );
} else if ( 'audio' === attributes.frame && MediaFrame.AudioDetails ) {
    frame = new MediaFrame.AudioDetails( attributes );
} else if ( 'video' === attributes.frame && MediaFrame.VideoDetails ) {
    frame = new MediaFrame.VideoDetails( attributes );
} else if ( 'edit-attachments' === attributes.frame && MediaFrame.EditAttachments ) {
    frame = new MediaFrame.EditAttachments( attributes );
}

So one is lead to believe you could do this:

var frame = wp.media.frames.frame = wp.media({
    title: 'Select Image',
    button: { text: 'Select' },
multiple: false,
frame: 'edit-attachments',
controller: {
  gridRouter: {}
}
});
frame.open();

But it won’t work.
The first trouble you meet is that some script is required. This can be dealt with like this:

add_action( 'admin_enqueue_scripts', function() {
  wp_enqueue_media();
  wp_enqueue_script( 'media-grid' );
  wp_enqueue_script( 'media' );
});

But still no cigar.

The problem can be found in wp-includes/js/media-grid.js:

EditAttachments = MediaFrame.extend({
initialize: function() {
    this.controller = this.options.controller;
    this.gridRouter = this.controller.gridRouter;

This shows that EditAttachments requires a controller provided in the options, and this controller must have property “gridRouter”. So something like this:

var frame = wp.media.frames.frame = wp.media({
  frame: 'edit-attachments',
  controller: {
    gridRouter: {}
  }
});

But this won’t work, because you need a valid gridRouter.

This is all related to the underlying grid.

To learn more about the wp.media, I can recommend this plugin:
https://github.com/ericandrewlewis/wp-media-javascript-guide

And of course, there is this page:
https://codex.wordpress.org/Javascript_Reference/wp.media

Related questions:

  • Open the attachment details modal
  • https://stackoverflow.com/questions/41098126/wordpress-open-edit-attachment-modal-with-wp-media/
  • Open media frame and select an attachment
  • Get attachment/image info in JS

Leave a Comment