retrieve custom image sizes from media uploader javascript object

April 29, 2022 by IT Nursery

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

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

        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.

Leave a Comment Cancel reply