Making the thumbnails in the backend Media section bigger

3 comments

1. I don’t see any way of hooking into this. Following the lead of wp_get_attachment_image takes nowhere…

   // wp-admin/includes/class-wp-media-list-table.php
   // line 200
   
   case 'icon':
       $attributes = 'class="column-icon media-icon"' . $style;
   ?>
       <td <?php echo $attributes ?>><?php
           if ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) {
               if ( $this->is_trash || ! $user_can_edit ) {
                   echo $thumb;
               } else {
   ?>
               <a href="<?php echo get_edit_post_link( $post->ID, true ); ?>" title="<?php echo esc_attr( sprintf( __( 'Edit “%s”' ), $att_title ) ); ?>">
                   <?php echo $thumb; ?>
               </a>
   
   <?php           }
           }
   

   ---

   

   Inspecting the output we see that the image is being forcefully resized, so manipulating the DOM can be an alternative.

   add_action( 'admin_head-upload.php', 'wpse_59182_bigger_media_thumbs' );
   
   function wpse_59182_bigger_media_thumbs() 
   {
       ?>
       <script type="text/javascript">
           jQuery(document).ready( function($) {
               $('.wp-list-table img').each(function(){
                   $(this).removeAttr('width').css('max-width','100%');
                   $(this).removeAttr('height').css('max-height','100%');
               });
               $('.column-icon').css('width', '130px');
           });     
       </script>
       <?php
   }
   

   edit by Question asker ( Tom ):

   I applied the solution in this question, and these are the results:

   

   Log in to Reply

2. Expanding on brasofilo’s solution I used the below to enlarge the thumbnails within the media uploader / gallery

   Its far from perfect and needs more time spent – most noticeably with the active draggable area remaining the same as previous when resorting – but if you’re dealing with 10’s of similar images attached to a single post I found it a huge help as is.

   add_action( 'admin_head-media-upload-popup', 'make_media_thumbs_bigger' );
   
   function make_media_thumbs_bigger() 
   {
       ?>
       <script type="text/javascript">
           jQuery(document).ready( function($) {
   
               $('#media-upload img').each(function(){
                   $(this).removeAttr('width').css('max-width','100%');
                   $(this).removeAttr('height').css('max-height','100%');
               });
   
               $('#media-upload .media-item').each(function(){
                   $(this).removeAttr('style');
               });
   
               $('#media-upload .media-item ').css('height', '96px');
   
               $('#media-upload a.describe-toggle-on, #media-upload a.describe-toggle-off').click(function() {
                        $(this).parent().removeAttr('style');
                        $(this).next('TABLE.slidetoggle').find('IMG').removeAttr('style'); 
               });
   
               $('#media-upload a.describe-toggle-off').click(function() {
                        $(this).parent().css('height', '96px');
               });
   
   
           });     
       </script>
       <?php
   }
   

   Log in to Reply

3. What your asking isn’t a “simple” fix. If you’re serious about getting larger thumbs I’d start by looking at the wp-admin/class-wp-media-list-table.php file, or here in the PHPXref site (Around line 203). You can examine the code to see how it’s generated and decide how to adjust it from there

   Log in to Reply