WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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
share|improve this question
up vote 5 down vote accepted

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.

share|improve this answer
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. – TV productions Jul 13 '14 at 16:22

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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