Change Media modal image size

Question

When i create a page, and click "Add media" button above the TinyMCE editor, the Media Modal shows up.

Question: How do i edit the size of the images showing in the modal?

The current images are full size, causing the browser to load very slow and in some cases the browser crashes (most browsers except Safari on Mac)..

Thanks.

Answer 1

I don't know of any good way to do that as the problem is most likely that the images are way larger than they should be.

However, there are a couple of things that you could do to resolve the problem.

First, re-size your images before uploading them if at all possible.

• For most applications, there is no reason to upload 5MB+ files to a web site, especially since most users cannot see anything larger than about 1200px wide anywise.
• Resize images to 1200px wide or smaller before uploading and then they will load a lot faster. If you don't need them larger than 800px wide, then scale them down to that before uploading.

Second, for images that are already loaded the best bet would be to write / find a script to automatically scale down all images larger than your chosen size.

• This is easier said than done, but if you can write code decently or know someone who can, it doesn't take terribly much to write such a script and it saves a lot of time.
• If you cannot do it in an automated fashion, you could simply go through them all, remove the current images, and then put smaller images up in their place.

I see a lot of people uploading images directly from their modern cameras. In many cases, the image files are 4000+ pixels wide and over 5MB in size. Except for a few applications, uploading anything over about 800px wide is just wasting bandwidth.

Answer 2

I wrote about a possible workaround at another site, but let me repeat a part of it here with some adjustments to your question:

The Media Library grid view uses a Backbone micro template and fetches the data via ajax.

In the imageSize() method, in the media-view.js file, we can see that the medium size is used and if that size doesn't exists the actual/full size is used instead:

size = size || 'medium';

To use the thumbnail instead, you can try the following:

/**
 *  Use a custom fallback image size, if medium size doesn't exists.
 *
 * @see http://wordpress.stackexchange.com/a/177571/26350
 */

add_filter( 'wp_prepare_attachment_for_js', function( $response, $attachment, $meta )
{
    // Fallback image size, if medium size doesn't exists.
    $fallback_size = 'thumbnail'; // Edit this to your needs.

    // If medium size image doesn't exist:
    if(  'image' === $response['type'] && ! isset( $response['sizes']['medium'] ) )     
    {
       // Use the fallback size instead:
       if( isset( $response['sizes'][$fallback_size] ) )
           $response['sizes']['medium'] = $response['sizes'][$fallback_size];                  
   }
   return $response;
}, 10, 3 );

If you want to use other custom fallback image sizes, other than the default ones, you can either add them via the image_size_names_choose filter or add this to the above check:

$response['sizes']['medium'] =  wp_get_attachment_image_src( 
    $response['id'], 
    $fallback_size 
);

Note that this method replaces the non-exsisting medium image size with the fallback size, instead of the full size, when you insert it into the post content editor.

Another drastic approach would be to override (from a plugin code without modifying the core files) the Backbone micro template to your needs, for example:

 <# if ( data.sizes.medium ) { #>
     <img src="{{ data.sizes.medium.url  }}" draggable="false" alt="" />
<# } else if ( data.sizes.fallback_image_size) { #>
     <img src="{{ data.sizes.fallback_image_size.url  }}" draggable="false" alt="" />
 <# } else { #>
    <img src="{{ data.size.url }}" draggable="false" alt="" />
 <# } #>

where we replace fallback_image_size with the fallback image size, e.g. thumbnail.

But I'm not sure how frequently these micro templates are changing between WordPress versions, so I wouldn't recommend it, for now ;-)