I am attempting to get the custom image sizes that I've created using add_image_size to return in the javascript object. I know how to include them in the dropdown, but I don't want / need that.

The current object returns the defaults (full, large, medium, and thumbnail) in an array, but none of the custom sizes.

Here is the code I am using to set the uploader instance

jQuery('input.guide-logo-upload').on('click', function( event ){


    // If the media frame already exists, reopen it.
    if ( file_frame ) {

    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
        title: jQuery( this ).data( 'uploader_title' ),
        button: {
            text: jQuery( this ).data( 'uploader_button_text' )
        multiple: false // force single file

    // run the callback when selected
    file_frame.on( 'select', function() {

        // make sure to only deal with the first item
        attachment = file_frame.state().get('selection').first().toJSON();


        // Populate the field with the URL and show a preview below it
        jQuery('input#g-logo').val( attachment.url );
        jQuery('input#g-logo-id').val( attachment.id );

        jQuery('p.logo-description').after( '<img class="logo-display logo-140" src="' + attachment.sizes.thumbnail.url + '">' );
        jQuery('p.logo-description').after( '<img class="logo-display logo-350" src="' + attachment.sizes.medium.url + '">' );


    // Finally, open the modal

1 Answer 1


thanks to a friend on Twitter, I was able to get this working. Below is the code.

function wpse_110060_image_sizes_js( $response, $attachment, $meta ){

        $size_array = array( 'custom_size_one', 'custom_size_two') ;

        foreach ( $size_array as $size ):

            if ( isset( $meta['sizes'][ $size ] ) ) {
                $attachment_url = wp_get_attachment_url( $attachment->ID );
                $base_url = str_replace( wp_basename( $attachment_url ), '', $attachment_url );
                $size_meta = $meta['sizes'][ $size ];

                $response['sizes'][ $size ] = array(
                    'height'        => $size_meta['height'],
                    'width'         => $size_meta['width'],
                    'url'           => $base_url . $size_meta['file'],
                    'orientation'   => $size_meta['height'] > $size_meta['width'] ? 'portrait' : 'landscape',


        return $response;
add_filter ( 'wp_prepare_attachment_for_js',  'wpse_110060_image_sizes_js' , 10, 3  );

note: the array and foreach are only necessary because I have two separate ones I needed to include. if there is only 1 to include, that can be removed.

  • This works very nice, though you have to make sure this function (and the add_filter part) can be called when it is an AJAX request. I've been searching for hours to find out that the file with the function wasn't included when it was an AJAX request.
    – Ties
    Commented Jul 13, 2014 at 16:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.