Change size of featured image in Edit Post screen

4 comments

1. From my past research I concluded that there is no sane way to affect the featured images box with actions and filters. My solution was to use jQuery inserted on the admin_head hook, to change things after they are loaded.

   What I wanted was to add some textual detail outlining how the featured image would be used by the theme (something most themes should do just like sidebar descriptions, and for which there should be a filter). Here’s code that shows what I did:

   function gv_admin_featured_image_tweaks() {
       $output = "STUFF TO INSERT HERE";
       ?>
   <script type="text/javascript">
       jQuery(document).ready(function($) {
           $('#postimagediv .inside').append("<?php echo $output; ?>");
       });
   </script>
       <?php
   }
   add_action('admin_head', 'gv_admin_featured_image_tweaks');
   

   Not elegant but effective. You could do something similar to change the image. Instead of using .append() to add content at the end of the metabox you could instead get $(‘#set-post-thumbnail’) (the a tag with the image inside) and replace it with an img tag for the version of the featured image that you will use in your theme. Note that you can’t just replace the SRC value of the existing IMG tag because it also has width and height.

   Log in to Reply

2. Thanks to @SergeyBiryukov I’ve made some progress with the following taken from this trac ticket, however, it seems the best you can do is show a full size image, medium or thumb. I’ve not cracked custom size (e.g. 800px wide by 200px high for example) I will update my original post if I find a way!

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

   Log in to Reply

3. Featured images are called by using the_post_thumbnail() from within The Loop. You can specify a specific image size according to the image sizes available in Media Settings. E.g. the_post_thumbnail('medium'); would show the Medium size image. If you aren’t happy with the images sizes available, you can change the sizes from the Admin area under Media Settings or add additional sizes from within functions.php. Be sure to either reload the image after the image sizes have been updated or use a plugin to rebuild all the images otherwise your picture will remain the same size regardless.

   http://codex.wordpress.org/Function_Reference/the_post_thumbnail

   Log in to Reply

4. If anyone is finding this years later…

   Another option is to use something like Add Admin CSS to add custom styles to your backend. Once you do that it’s as simple as using your browser dev tools to determine the right CSS to add. I used this to drag the Featured Image box above my Content Editor (allowed when using Advanced Custom Fields plugin) and overriding the default thumbnail size with CSS:

   #postimagediv a#set-post-thumbnail {
       width: 100% !important;
       height: auto !important;
       height: 300px !important;
       overflow: hidden !important;}
   
   #postimagediv img.attachment-266x266, #postimagediv img.size-266x266{
       width: 100% !important; 
       min-width: 100% !important;}
   

   That should do the trick for this particular application.

   Log in to Reply