Is it possible to re-use the image details popup?

Let me answer in the most simple way.
It depends on the situation and sometimes you might want to create your own MediaFrame, but i think this would be slightly out of the questions scope and would need much more explanation:

Assuming all there is is an ID of the attachment to edit, following code will open the details.
To make this work outside a built-in edit screen you will need to enqueue the media stuff by yourself ( see wp_enqueue_media )

  // we only want to query "our" image attachment
  // value of post__in must be an array
  var queryargs = {post__in: [385]};


  wp.media.query(queryargs) // set the query
    .more() // execute the query, this will return an deferred object 
    .done(function(){ // attach callback, executes after the ajax call succeeded

    // inside the callback 'this' refers to the result collection
    // there should be only one model, assign it to a var
    var attachment = this.first();

    // this is a bit odd: if you want to access the 'sizes' in the modal
    // and if you need access to the image editor / replace image function 
    // attachment_id must be set.
    // see media-models.js, Line ~370 / PostImage 
    attachment.set('attachment_id', attachment.get('id'));

    // create a frame, bind 'update' callback and open in one step
    wp.media({
      frame: 'image', // alias for the ImageDetails frame
      state: 'image-details', // default state, makes sense
      metadata: attachment.toJSON(), // the important bit, thats where the initial informations come from 
    }).on('update', function(attachmentObj){ // bind callback to 'update'
           console.log(attachmentObj); // attachment object is passed to the callback, do whatever you want from here
    }).open(); // finally open the frame
  });

Thats it basically.
Have fun.

Leave a Comment