0

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.

2 Answers 2

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!

3
  • Thanks for that incredibly detailed answer. It's not quite right, and you did get me close, but I wonder if there's some more efficient way or something more granular I can change. The actual code generating my thumbnails is above what you had me replace, it's else if ( 'image' === data.type && data.size && data.size.url ) { #><div class="centered"><img src="{{ data.size.url }}" draggable="false" alt="" /></div> (several CRs removed.) I could just hardcode a change there, but is there nowhere upstream I can just change the data.size getting passed to this template, instead of this huge edit?
    – John Smith
    Sep 19, 2023 at 18:32
  • 1
    Ahoy there. Weird, that's the template that gets loaded on my wordpress. You can check in the network Tab in your developer tools what gets loaded by the script through admin-ajax.php and you will see that actually all of the sizes get loaded, it's just that in the template (which the only way to change is the one i showed) the medium size gets loaded into the grid. The only other way would be to put a filter on wp_prepare_attachment_for_js to change the image sizes, and that is an incredibly worse idea. Sep 20, 2023 at 6:06
  • Hmmmm. I'll have to take a look at that. (I seriously appreciate these detailed replies, by the way.) I wound up looking at wp_prepare_attachment_for_js too, but it turned into a rabbit hole and I did have the impression I might not want to mess with it. I have been trying to find where data.size gets set. I actually wound up doing a pretty deep dive into the backbone.js stuff, which I guess is where a lot of things gets populated, and no productive answers yet. This seems to be hardcoded in somewhere deep.
    – John Smith
    Sep 21, 2023 at 17:42
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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