Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 ){

    event.preventDefault();

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

    // 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();

        // WHERE ARE MY CUSTOM SIZES
        console.log(attachment);

        // 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
    file_frame.open();
});
share|improve this question

1 Answer 1

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

        endforeach;

        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 at 16:22

Your Answer

 
discard

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.