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!