WordPress Media Uploader with size select

Question

I want to add an image input to my own WordPress plugin. For that I use the standard WordPress media-uploader like so: ``` var custom_uploader; $('.upload_image_button').click(function(e) { input = $(this); e.preventDefault(); custom_uploader = wp.media.frames.file_frame = wp.media({ title: 'Choose Collage Image', library: { type: 'image' }, button: { text: 'Choose Collage Image' }, multiple: false, displaySettings: true, displayUserSettings: false }); custom_uploader.on('select', function() { attachment = custom_uploader.state().get('selection').first().toJSON(); input.prev('input').val(attachment.url); }); custom_uploader.open(); }); ``` This works perfect. I add two more image sizes that were exact for my plugin: ``` if ( function_exists( 'add_image_size' ) ) { add_image_size( 'collage-large', 460, 660, true ); add_image_size( 'collage-small', 460, 325, true ); } ``` My problem: The selector for the image size or better the thumbnail selector is not shown at the media upload form.…

Accepted Answer

You could use the media insertion dialog as shown on the "edit page" site, which adds alignment, link_to and size input fields. To do so add `frame: 'post'` to your options array:

```
file_frame = wp.media.frames.file_frame = wp.media({
    title: 'Select a image to upload',
    button: {
        text: 'Use this image',
    },
    multiple: false,
    frame:    'post',    // <-- this is the important part
    state:    'insert',
});
```

Instead of listening to the "select" event listen to the "insert" event. This code shows how retrieve the additional properties including the size:

```
// When an image is inserted, run a callback.
file_frame.on( 'insert', function(selection) {
    var state = file_frame.state();
    selection = selection || state.get('selection');
    if (! selection) return;
    // We set multiple to false so only get one image from the uploader
    var attachment = selection.first();
    var display = state.display(attachment).toJSON();  // <-- additional properties
    attachment = attachment.toJSON();
    // Do something with attachment.id and/or attachment.url here
    var imgurl = attachment.sizes[display.size].url;
    jQuery( '#filenameFromURL' ).val( imgurl );
});
```

WordPress Media Uploader with size select

Solution

Problem