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?
So i can use the size settings for example.
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?
So i can use the size settings for example.
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.