WordPress Media Uploader with size select

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 );});

I find some where in Internet. May be it useful.

attachment = custom_uploader.state().get('selection').first().toJSON();

With attachment you can working with:

1. alt
2. author
3. caption
4. compat ( <-- It is Object )
   • item
   • meta
5. date
6. dateFormatted
7. description
8. editLink
9. filename
10. height
11. icon
12. id
13. link
14. menuOrder
15. mime
16. modified
17. name
18. nonces ( <-- thi is object)
    • delete
    • update
    • proto
19. orientation
20. sizes ( <-- this is object)
    • full ( <-- this is object)
      • height
      • orientation
      • url
      • width
      • proto
    • medium ( <-- this is object)
      • height
      • orientation
      • url
      • width
      • proto
    • thumbnail ( <-- this is object)
      • height
      • orientation
      • url
      • width
      • proto
    • proto ( <-- this is object)
21. status
22. subtype
23. title
24. type
25. uploadedTo
26. url
27. width

To solve your problem I suggest use with case 20 above:

input.prev('input').val(attchment.sizes.collage-large.url);

Hope this work!

You're VERY close. To make the size selectable within the admin panel, review the add_image_size Codex Entry:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );function my_custom_sizes( $sizes ) {    return array_merge( $sizes, array(        'your-custom-size' => __('Your Custom Size Name'),    ) );}

So in your case, this should do what you need:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );function my_custom_sizes( $sizes ) {    return array_merge( $sizes, array(        'collage-large' => __('Collage Large'),        'collage-small' => __('Collage Small'),    ) );}