1

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?

3

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:

1

Unfortunately the logic of the attachment details isn't made to be used standalone - it requires the grid that opens it. You can however use the get_media_item( attachment_id ) method to receive the HTML of the form for modifying images: https://developer.wordpress.org/reference/functions/get_media_item/

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.