How can I get the Media Library backend to show larger thumbnails?

Question

I have a pretty simple need. On the admin screens, my media gallery is reducing my picture thumbnails to about 145x145 so they'll fit in 6 columns across the screen. The only way I can get a good look at them is to click on them individually to see larger versions. I want larger thumbnails and fewer columns.

I'd like to show the grid images in the admin-side Media Library at about 450px square (probably only 2 columns across) so I can get a good gander at them. I'm comfortable editing child theme PHP files, etc., and if possible would rather just insert some manual code somewhere than rely on a plugin. But I don't know much about how WP's admin screens work or if they're customizable by editing theme files like the front end is.

I've tried changing the thumbnail and medium default sizes on the Media settings page, but they made no difference.

There's a 9-year old plugin "Media Thumbnail Enlarger" that seems to claim to be able to do this, I tried it but couldn't make it work.

I can see in the code that WP is using the 300px versions of the images and displaying them at smaller sizes. I've gone down a rabbit hole trying to find what's constraining the size or dictating the number of columns.

The thumbnails are enclosed within a <div class="media-frame-content" data-columns="7"> but that data-columns number seems to be set dynamically. As a kludgy workaround, I have gotten it to always create 2 columns by adding the following to my functions.php:

add_action ('admin_head','force_media_library_width');

function force_media_library_width() {
  echo '<style> 
.media-frame-content .attachment {
    width: 50% !important;
}
  .media-frame-content .attachment img {
    width: 100% !important;
}
  </style>';
}

However, this results in a quality loss, since it's still using the 300px thumbnails, and now blowing those up to use up half the available space. I can't find where in the code it decides to use specifically those.

I sure do wish the media gallery had a "thumbnail display size" setting. Failing that, where can I edit something to give me what I need, or, worst case scenario, is there a plugin that will do it? Thanks in advance.

Answer 1

So, the media grid is built using javascript, Ajax, and JS-Templates. The templates for the media grid view is directly echoed by the function wp_print_media_templates, which in turn is added to some hooks by the function wp_enqueue_media.

What to do now?

I want to stress that i would not recommend this, because there are a lot of media templates echoed out by that function, and once wordpress would make a change to those templates, you would be advised to adopt these changes to your "new" template function so to not make any breaking changes.

Step 1: Search for the function wp_print_media_templates . You should find it in the wp_includes/media-template.php

Step 2: Copy the complete function into (for instance) your functions.php and change the function name, let's say to wpse_418772_print_media_templates

Step 3: Search for this line in your function: <script type="text/html" id="tmpl-attachment">. Go 13 lines down and change the following:

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

to this:

<# } else if ( data.sizes && data.sizes.large ) { #>
    <img src="{{ data.sizes.large.url }}" class="thumbnail" draggable="false" alt="" />
<# } else if ( data.sizes && data.sizes.medium ) { #>
         <img src="{{ data.sizes.medium.url }}" class="thumbnail" draggable="false" alt="" />

Step 4: Add the following code (again, for instance to your functions.php):

function wpse_418772_change_media_templates(){
    remove_action( 'admin_footer', 'wp_print_media_templates' );
    remove_action( 'wp_footer', 'wp_print_media_templates' );
    remove_action( 'customize_controls_print_footer_scripts', 'wp_print_media_templates' );
    add_action( 'admin_footer', 'wp_print_media_templates' );
    add_action( 'wp_footer', 'wp_print_media_templates' );
    add_action( 'customize_controls_print_footer_scripts', 'wp_print_media_templates' );
}
add_action('wp_enqueue_media', 'wpse_418772_change_media_templates');

Instead of loading the default templates for the media grid, wordpress will now load your customized templates.

Happy Coding!

Answer 2

Depending on the complexity of the change you need to make, you could do what I did.

For some reason, WP was using the largest possible image size as the preview thumbnail in the Media Library.

As noted in other answers, this is happening in a JS template that relies on data.size.url which I was unable to ensure got the correct image information.

As noted, print_media_templates does not have a filter but I was able to use add_action. In my case it runs after the markup is in the page, and it modies the JS template by doing a search and replace in the innerText.

It happens soon enough that this is what WP then relies on.

The advantage is that you do not have to maintain a separate copy of media-template.php with WordPress Core. You will need to check from time to the that this particular JS/template code doesn't change - so risks are minimized but not zero.

function modify_media_library_js_template(){
    ?>
    <script>
    (function(){
        var el = document.getElementById('tmpl-attachment') || false
        if (el) {
            el.innerHTML = el.innerText.replace(/\{\{\s*data\.size\.url\s*\}\}/g, "{{ data.sizes['0200-01-X'].url }}");
        }
    })();
    </script>
    <?php
}
add_action( 'print_media_templates', 'modify_media_library_js_template', 1 );

Note: I am using a regex string in my JS because in my case a normal replace wouldn't work and I gave up trying to figure out why.

Answer 3

Not a solution, because you have to do it every time you open the media library, but a workaround is:

"Inspect" one of the thumbnails, find ".media-frame-content[data-columns="x"] .attachment" and change the width percentage.