Size of featured image in admin panel?

7 comments

1. Just in case somebody is stumbling on this old post.

   WP introduced a new filter called admin_post_thumbnail_size for you to be able to change the default image size in the admin panel.

   To change the size of the featured thumbnail image you can use something like this:

   function custom_admin_thumb_size($thumb_size){
     return "custom-image-size"; //or use something like array(400,400).
   }
   add_filter( 'admin_post_thumbnail_size', 'custom_admin_thumb_size');
   

   Log in to Reply

2. You should replace _wp_post_thumbnail_html with get_the_post_thumbnail

   Log in to Reply

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

   Log in to Reply

4. The function _wp_post_thumbnail_html returns a code like this:

   <p class="hide-if-no-js">
       <a title="Set featured image" href="http://example.com/wp-admin/media-upload.php?post_id=4573&type=image&TB_iframe=1" id="set-post-thumbnail" class="thickbox">
           <img width="266" height="90" src="http://example.com/wp-content/uploads/thumb2-3-846x288.png" class="attachment-post-thumbnail" alt="thumb2-3" />
       </a>
   </p>
   <p class="hide-if-no-js">
       <a href="#" id="remove-post-thumbnail" onclick="WPRemoveThumbnail('dfd8f3353b');return false;">
           Remove featured image
       </a>
   </p> 
   

   Note that the image is 846x288, but it’s being resized to 266x90 in the img tag attributes.

   Analyzing the function, we see that if there is an image size named post_thumbnail, it will get that one. Otherwise, it gets an image size of 266x266 (with crop). You can simply copy the function and modify to your desired output.

   Other option is to use the filter admin_post_thumbnail_html and remove the img width and height attributtes:

   add_filter( 'admin_post_thumbnail_html', 'filter_featured_img_so_17713997' );
   
   function filter_featured_img_so_17713997( $html )
   {
       $doc = new DOMDocument();
       $doc->loadHTML($html);
   
       $tags = $doc->getElementsByTagName('img');
       if(count($tags) > 0)
       {
              $tag = $tags->item(0);
              $tag->removeAttribute('width');
              $tag->removeAttribute('height');
              return $doc->saveHTML($tag);
       }
   
       return $html;
   }
   

   The results may not be what you expect, though. If the image is larger than 266, it bleeds out of the browser canvas.

   Log in to Reply

5. Here’s another option to use a custom sized thumbnail or the system defined ‘full’ sized image (the original size of the image you uploaded) as the Featured Image displayed in the admin panel:

   /**
    * 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 a custom image size, so it is defined
    *          - if using 'full', instead, then no need to define custom
    *          - 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, especially so we can set our own callback and 
    *          - move it into the larger main column.
    *          - Note that in any event, the 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', 'so17713997_move_meta_box');
   
   function so17713997_move_meta_box(){
       remove_meta_box( 'postimagediv', 'post', 'side' );
       add_meta_box('postimagediv', __('Featured Image'), 'so17713997_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 so17713997_post_thumbnail_meta_box( $post ) {
       $thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
       echo so17713997_wp_post_thumbnail_html( $thumbnail_id, $post->ID );
   }
   
   /**
    * step 4   - replace _wp_post_thumbnail_html with our version that calls our thumbnail 'admin-post-thumbnail' 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 so17713997_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['admin-post-thumbnail'] ) )    // use our custom image size instead of 'post-thumbnail' OR use 'full' for system defined fullsize image
               $thumbnail_html = wp_get_attachment_image( $thumbnail_id, array( $content_width, $content_width ) );
           else
               $thumbnail_html = wp_get_attachment_image( $thumbnail_id, 'admin-post-thumbnail' ); // use our custom image size instead of 'post-thumbnail' OR use 'full' for system defined fullsize image
           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 );
   }
   

   Note first that the feature image selected may not reflect the updated size until after the post has been Saved or Updated, as appropriate.

   Also, this hack makes extensive use of the following core WordPress functions:

   the_post_thumbnail(),
   add_meta_box(),
   post_thumbnail_meta_box(), and
   
   _wp_post_thumbnail_html

   (I didn’t have enough reputation yet to post more than two links, so google them.)

   Log in to Reply

6. Have you tried changing the default Featured Image size by using set_post_thumbnail_size()? I had the same issue and this worked perfectly.

   Log in to Reply

7. The WordPress Block editor shows Featured Images using square thumbnails by default. To change that, we need to apply a JavaScript filter instead of a PHP filter. A very simple filter to display uncropped Featured Images looks like this:

   wp.hooks.addFilter(
     "editor.PostFeaturedImage.imageSize",
     "uncroppedFeaturedImage",
     () => "post-thumbnail"
   );
   

   Load that script from the enqueue_block_editor_assets hook. Other registered image sizes (medium, large, etc.) can also be used.

   Log in to Reply