WordPress Media Uploader with size select - php

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. How do I do that?

Answer 1

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

Answer 2

I find some where in Internet. May be it useful.
attachment = custom_uploader.state().get('selection').first().toJSON();
With attachment you can working with:
alt
author
caption
compat ( <-- It is Object )
item
meta
date
dateFormatted
description
editLink
filename
height
icon
id
link
menuOrder
mime
modified
name
nonces ( <-- thi is object)
delete
update
proto
orientation
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)
status
subtype
title
type
uploadedTo
url
width
To solve your problem I suggest use with case 20 above:
input.prev('input').val(attchment.sizes.collage-large.url);
Hope this work!

Answer 3

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