enter image description here

I’m having some trouble finding answer as WordPress media javascript seems to be poorly documented.

I am working on a project that needs to replace the default TinyMCE editor with CKEditor.

I have the following code to open up the media manager:

frame = new wp.media.view.MediaFrame.Post({
    title: "Media Manager",
    library: {
        type: 'image',
    button: {
        text: "Insert Images"
    multiple: true,
        state: 'insert'

And to insert images, the following:

frame.on('insert', function (){
    var html = [];
    var attachments = frame.state().get('selection');
    var selected = attachments.models;

    selected.forEach(function (selection){
        var attachment = selection.toJSON();

            "<figure class='image'>" +
            "<img src='" + attachment.url + "' alt='" + attachment.alt + "'/>" +
            (attachment.caption !== '' ? "<figcaption>" + attachment.caption + "</figcaption>" : "") +


Which works great to insert any number of images into the CKEditor.

However, rather than using the full sized image, I would like to use the image URL for whatever sized image was selected in the “Size” field under “Attachment Display Settings” (see image). I’m sure there is a way to access the data in those “Attachment Display Settings” fields, however I cannot seem to find any information about this anywhere.

Any help would be greatly appreciated.


Read more here: Retrieving Attachment Display Settings Utilizing WordPress Media Javascript


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Wordpress related questions and answers: