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?

Improve this question

2 Answers 2

Reset to default
4

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:

Improve this answer
2

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/

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.