Resize Admin Featured Image Thumbnail in CPT Edit Screen

Question

I have a custom post type for a slider and I'm using the Featured Image thumbnail uploader to set the image.

I've relocated the Featured Image meta box to be underneath the title section in the admin. Now, to avoid user confusion, I would like the Featured Image "thumbnail" to display (in the admin CPT editor screen), at the proportionate dimensions of the image uploaded (in this case a slider image that's 800px wide by 300px high).

Currently the image shows up at 266px width and I believe it is this function that is controlling it.

I do realise that modifying this is only for ascetics and it won't affect the 'output' size of the image on the front end (I know how to control that). However, a user who uploads a slider image does not expect to see a thumbnail.

This is simply to show the user the image they have uploaded, in the right proportions.

Currently I am using this to shift the featured image meta-box;

// move the featured image box and rename to 
add_action('do_meta_boxes', 'wpse33063_move_meta_box');

function wpse33063_move_meta_box(){
remove_meta_box( 'postimagediv', 'slider-image', 'side' );
add_meta_box('postimagediv', __('Add Your Slider Image'), 'post_thumbnail_meta_box', 'slider-image', 'normal', 'high');
}

I have seen in this post, this one and this one (more related to TwentyTen), where others have suggested methods to show a re-sized "thumbnail" in the admin custom post edit screen. I've tried these methods and none of them seem to work / all return server error.

Update: I answered my own question after finding a method in WordPress Trac - see below

Answer 1

Righto, I found the answer in this trac ticket, so kudos to @SergeyBiryukov. I'm posting here for anyone else that wants to know ;-) However, I've not cracked custom size (e.g. 800px wide by 200px high for example) which would be nice.

// move the featured image box from the right hand column, to sit under the title section, and rename it 
add_action('do_meta_boxes', 'wpse33063_move_meta_box');

function wpse33063_move_meta_box(){
remove_meta_box( 'postimagediv', 'slider-image', 'side' );
add_meta_box('postimagediv', __('Add Your Slider Image'), 'post_thumbnail_meta_box', 'slider-image', 'normal', 'high');
}



// change size of admin featured image size in edit screen 
function change_featured_image_size_in_admin_28512( $downsize, $id, $size ) {
if ( ! is_admin() || ! get_current_screen() || 'edit' !== get_current_screen()->parent_base ) {
    return $downsize;
}

remove_filter( 'image_downsize', __FUNCTION__, 10, 3 );

// settings can be thumbnail, medium, large, full 
$image = image_downsize( $id, 'medium' ); 
add_filter( 'image_downsize', __FUNCTION__, 10, 3 );

return $image;
}
add_filter( 'image_downsize', 'change_featured_image_size_in_admin_28512', 10, 3 );

Answer 2

To achieve a custom size (after updating/saving the post), try the following ...

// Step 1   - define our custom image size so we can call it instead of the system defined default 'post-thumbnail' 
add_image_size( 'slider_image', 800, 300, true );

// Step 2   - replace the meta box with ours for our CPT 'slider-image' only, especially so we can set our own callback. The rename is nice, too.
add_action('do_meta_boxes', 'wpse33063_move_meta_box');

function wpse33063_move_meta_box(){
    remove_meta_box( 'postimagediv', 'slider-image', 'side' );
    add_meta_box('postimagediv', __('Add Your Slider Image'), 'wpse33063_post_thumbnail_meta_box', 'slider-image', 'normal', 'high');
}

// Step 3   - custom callback to call our functional replacement for _wp_post_thumbnail_html for our CPT 'slider-image' only
function wpse33063_post_thumbnail_meta_box( $post ) {
    $thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
    echo wpse33063_wp_post_thumbnail_html( $thumbnail_id, $post->ID );
}

// Step 4   - replace _wp_post_thumbnail_html with our version that calls our thumbnail 'slider_image' instead of the default 'post-thumbnail'
//          - we could do more here, like adjust the content width variable, but not entirely necessary. The custom image size we defined will
//          - handle most of it, plus the admin section these days has responsive css, so the image doesn't blow-out column width in any event.
function wpse33063_wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
global $content_width, $_wp_additional_image_sizes;

$post               = get_post( $post );
$post_type_object   = get_post_type_object( $post->post_type );
$set_thumbnail_link = '<p class="hide-if-no-js"><a title="%s" href="%s" id="set-post-thumbnail" class="thickbox">%s</a></p>';
$upload_iframe_src  = get_upload_iframe_src( 'image', $post->ID );

$content = sprintf( $set_thumbnail_link,
    esc_attr( $post_type_object->labels->set_featured_image ),
    esc_url( $upload_iframe_src ),
    esc_html( $post_type_object->labels->set_featured_image )
);

if ( $thumbnail_id && get_post( $thumbnail_id ) ) {
    $old_content_width = $content_width;
    $content_width = 266;
    if ( !isset( $_wp_additional_image_sizes['slider_image'] ) )    // use our custom image size instead of 'post-thumbnail'
        $thumbnail_html = wp_get_attachment_image( $thumbnail_id, array( $content_width, $content_width ) );
    else
        $thumbnail_html = wp_get_attachment_image( $thumbnail_id, 'slider_image' ); // use our custom image size instead of 'post-thumbnail'
    if ( !empty( $thumbnail_html ) ) {
        $ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
        $content = sprintf( $set_thumbnail_link,
            esc_attr( $post_type_object->labels->set_featured_image ),
            esc_url( $upload_iframe_src ),
            $thumbnail_html
        );
        $content .= '<p class="hide-if-no-js"><a href="#" id="remove-post-thumbnail" onclick="WPRemoveThumbnail(\'' . $ajax_nonce . '\');return false;">' . esc_html( $post_type_object->labels->remove_featured_image ) . '</a></p>';
    }
    $content_width = $old_content_width;
}

/**
 * Filter the admin post thumbnail HTML markup to return.
 *
 * @since 2.9.0
 *
 * @param string $content Admin post thumbnail HTML markup.
 * @param int    $post_id Post ID.
 */
return apply_filters( 'admin_post_thumbnail_html', $content, $post->ID );
}

Answer 3

Starting in WordPress 4.4, a new filter was introduced, admin_post_thumbnail_size, which allows for modifying the display size of the post thumbnail image in the Featured Image meta box.

When a theme adds ‘post-thumbnail’ support, a special ‘post-thumbnail’ image size is registered, which differs from the ‘thumbnail’ image size managed via the Settings > Media screen.

We can use this filter to alter the post-thumbnail size (266 x 266 px) and modify it to use the default thumbnail size (150 x 15 px) instead.

/**
 * Change Display Size of Featured Image Thumbnail in WordPress Admin Dashboard
 */
add_filter( 'admin_post_thumbnail_size', function ( $size, $thumbnail_id, $post ) {
    $sizes = get_intermediate_image_sizes();

    $result = array_search( 'thumbnail', $sizes );

    $size = is_numeric( $result ) ? $sizes[ $result ] : array( 100, 100 );

    return $size;
}, 10, 3 );

A specific size (e.g., 100 x 100 px) can also be specified or set as a fallback in case the intermediate thumbnail size isn't available.