WordPress Media Uploader with size select

2 Views

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:

Read More
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?

Post Views: 2

Related posts

Leave a Reply

3 comments

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

  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:

    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!

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