Add File Name to WordPress Media Browser

If you have a lot of images in your WordPress media library, especially if those images are visually similar, it can be somewhat awkward finding the correct file using the new media UI. You just have images, with no text to help identify them without clicking on each one.

media-browser

I wanted to add an overlay to each image so that I could see the filename, allowing easier skimming of the media library. The template for the HTML here comes from the function wp_print_media_templates(). It doesn’t really have any hooks for filtering the HTML, but we can wrap it in an output buffer and tweak it before rendering the template.

// hook in at the beginning of the footer to see if we need to add our wrapper
add_action( 'in_admin_footer', 'my_wrap_media_template_callback', 10, 0 );
 
// if the media templates are going to be rendered on this page, remove
// the default hook and put our wrapper in its place
function my_wrap_media_template_callback()  {
	if ( has_action( 'admin_footer', 'wp_print_media_templates' ) ) {
		remove_action( 'admin_footer', 'wp_print_media_templates' );
		add_action( 'admin_footer', 'my_wp_print_media_templates_wrapper' );
	}
}
 
// get the default templates, but add our HTML in the correct location
function wp_print_media_templates_wrapper() {
	ob_start();
	wp_print_media_templates();
	$output = ob_get_clean();
 
	// make sure to keep all of the whitespace here
	$to_find = '<div class="thumbnail">
					<div class="centered">
						<img src="{{ data.size.url }}" draggable="false" />
					</div>
				</div>';
	// this is the HTML that will render our filename
	$to_add = '
				<div class="filename">
					<div>{{ data.filename }}</div>
				</div>';
	$output = str_replace( $to_find, $to_find.$to_add, $output );
	echo $output;
}

A fairly simple wrapper. We’re just adding a <div> in the right spot, and WordPress handles the work of formatting it and populating the correct values.

media-browser-labeled

One Response to Add File Name to WordPress Media Browser

  1. James Walker says:

    I just want to say thank you thank you thank you!!!
    Have been looking for something like this for months, didn’t know where to start on my own, and found this today actually while searching for something else :)

    I modified the code to show filename as mouseover title instead, and will be using it on several sites i help manage. Being able to see wtf image they are choosing is going to make life easier for a *lot* of people. And – thank you again.