Featured image size in ADMIN panel?

3 comments

1. You can filter 'admin_post_thumbnail_html' and replace the img element with a new one in the size you need.

   Everything else will get messy and might lead to side effects.

   • Filtering image_downsize while watching for a size of 266×266 might affect images that are not meant to be shown in the metabox.
   • Changing the size for post-thumbnail temporary is not easy, because there are no safe points to start and end such a filter.

2. 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.

3. You could try this

   /**
    * step 1   define custom image size
    *
    *          either plan to use 'full' (returns the size of the image you uploaded)
    *          OR define our custom image size so we can call one of those instead
    *          of the system defined default 'post-thumbnail'
    *
    *          Remainder of this example assumes using 'full'
    *          no need to define custom a custom image size
    *          so remove the following add_image_size() line (and thereby skip step 1).
    */
   //add_image_size( 'admin-post-thumbnail', 846, 288, true );
   
   /**
    * step 2   replace the meta box with ours, for standard post type only
    *
    *          set our own callback and move it into the larger main column
    *
    *          Note the image, even in full size, won't ever have greater width than
    *          the current column width as CSS and modern admin panel make the image
    *          elements responsive to the column width.
    */
    add_action('do_meta_boxes', 'wpse104670_move_meta_box');
   
   function wpse104670_move_meta_box(){
       remove_meta_box( 'postimagediv', 'post', 'side' );
       add_meta_box('postimagediv', __('Featured Image'), 'wpse104670_post_thumbnail_meta_box', 'post', 'normal', 'low');
   }
   
   // step 3   custom callback to call our functional replacement for _wp_post_thumbnail_html for post type only
   function wpse104670_post_thumbnail_meta_box( $post ) {
       $thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
       echo wpse104670_wp_post_thumbnail_html( $thumbnail_id, $post->ID );
   }
   
   /**
    * step 4   replace _wp_post_thumbnail_html with our version that calls 'full'
    *          (or e.g. 'admin-post-thumbnail' if custom)
    *          instead of the default 'post-thumbnail'
    *
    *          We could do more here, like adjust the content width variable, but
    *          not entirely necessary as custom image size we defined will
    *          handle most of it and admin section has responsive CSS keeping image
    *          from ever exceeding column width.
    */
   function wpse104670_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['full'] ) )    // use 'full' for system defined fullsize image OR 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, 'full' ); // use 'full' for system defined fullsize image OR 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 );
   }
   

Comments are closed.