1

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.

2

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.

| improve this answer | |
  • Thanks alot. I was just wondering, isnt this solution for the displaying / outputted image? - maybe my question wasnt clear, but i will try to edit it so it will be more clear. My issue is when i click the "Add media" button it takes forever to load the modal because of the image sizes (in the modal) are full size. Its the modal preview images that i want to show in thumbnail size. – Sillo Feb 8 '15 at 13:24
  • Sorry Sillo, you are correct. I mis-understood. Revising my answer accordingly. – Privateer Feb 9 '15 at 14:23
  • Birgire gave an excellent solution that should work for you. I'd still avoid uploading massive images though =) – Privateer Feb 9 '15 at 17:21
  • Thanks for your revised answer - im already resizing the images before upload - i am using Imsanity plugin with the setting to resize all original images to 1920x* on upload. Sometimes for bg-images etc it can be good to have a bigger image. My problem is that when i open the Media Modal in the Wysiwyg editor, it uses the original image which i really dont understand why they would do - because it makes browsing though images alot slower because of the big images. Thanks for your solution, but i still wonder why they would use big images for browsing.. – Sillo Feb 26 '15 at 11:28
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 ;-)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.