I want to extend my image field in my widget with an 'edit image details' button. Is it possible in some way to re-use the popup from the tinyMCE editor?

enter image description here

So i can use the size settings for example.

  • Is your plugin using the tinyMCE Editor? I think you would need to provide more information of how you're handling the images in your widget plugin. The popup is triggered by a jquery class, however it seems that there is nothing specific in the link that passes the image ID to the popup, so the popup is relying on some other information to open the image details. So I don't think it will be as easy as triggering a jquery class. – gdaniel Feb 3 '15 at 13:54

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
      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.

  • Thanks for the explanation. This gives me a better understanding how to solve my problem. – s_ferdie Feb 28 '15 at 14:13

The CMB2 plugin lets you add images, take a look at that?

There are a couple plugins for adding image to a taxonomy term, which I believe also use the Media Manager, perhaps look at those as well?

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.