Wordpress: Override the template for the Attachment "thumbnails" in the Media Grid

Question

I'm trying to customize the template of the Media Browser when you click the "Add Media" button within Edit Post page, but it is not working. My intention is to add the filename over the thumbnail as a caption, so I don't need to select the image to check its filename on the Attachment Details panel.

I've found this really nice answer on how to customize the Attachment Details template by overriding it in media-templates.php:

https://stackoverflow.com/a/25948448/8717608

It works flawless.

So in theory I should be able to adapt that answer to override the Attachment template, which is found here, in the line 506:

https://github.com/WordPress/WordPress/blob/master/wp-includes/media-template.php

This my version:

add_action( 'wp_enqueue_media', 'add_media_overrides' );
function add_media_overrides() {
    add_action( 'admin_footer-post.php', 'override_media_templates' );
}
function override_media_templates(){
    ?> 
    <script type="text/html" id="tmpl-attachment_custom">
        <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
            <div class="thumbnail">
                <# if ( data.uploading ) { #>
                    <div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
                <# } else if ( 'image' === data.type && data.sizes ) { #>
                    <div class="centered">
                        <img src="{{ data.size.url }}" draggable="false" alt=""  style="height: 90%; transform: translate(-50%,-55%);"/>
                        <div style="
                            transform: translate(-50%,-100%);
                            background-color: black;
                            color: white;
                            margin-top: 50%;
                            font-size: 80%;
                            z-index: 9999;
                            position: relative;
                            vertical-align: middle;
                        ">{{ data.filename }}</div>
                    </div>
                <# } else { #>
                    <div class="centered">
                        <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
                            <img src="{{ data.image.src }}" class="thumbnail" draggable="false" alt="" />
                        <# } else if ( data.sizes && data.sizes.medium ) { #>
                            <img src="{{ data.sizes.medium.url }}" class="thumbnail" draggable="false" alt="" />
                        <# } else { #>
                            <img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
                        <# } #>
                    </div>
                    <div class="filename">
                        <div>{{ data.filename }}</div>
                    </div>
                <# } #>
            </div>
            <# if ( data.buttons.close ) { #>
                <button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text"><?php _e( 'Remove' ); ?></span></button>
            <# } #>
        </div>
        <# if ( data.buttons.check ) { #>
            <button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text"><?php _e( 'Deselect' ); ?></span></button>
        <# } #>
        <#
        var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
        if ( data.describe ) {
            if ( 'image' === data.type ) { #>
                <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
                    placeholder="<?php esc_attr_e( 'Caption this image&hellip;' ); ?>" {{ maybeReadOnly }} />
            <# } else { #>
                <input type="text" value="{{ data.title }}" class="describe" data-setting="title"
                    <# if ( 'video' === data.type ) { #>
                        placeholder="<?php esc_attr_e( 'Describe this video&hellip;' ); ?>"
                    <# } else if ( 'audio' === data.type ) { #>
                        placeholder="<?php esc_attr_e( 'Describe this audio file&hellip;' ); ?>"
                    <# } else { #>
                        placeholder="<?php esc_attr_e( 'Describe this media file&hellip;' ); ?>"
                    <# } #> {{ maybeReadOnly }} />
            <# }
        } #>
    </script>
    <script>
        jQuery(document).ready( function($) {
            if( typeof wp.media.view.Attachment != 'undefined' ){
                wp.media.view.Attachment.prototype.template = wp.media.template( 'attachment-custom' );
            }
        });
    </script>
    <?php
}

By clicking Add Media button I was expecting to see all the thumbs with its filename in a black background, but nothing is happening. Looks like I'm missing something...

Answer 1

There was a typo, and instead of:

wp.media.view.Attachment.prototype.template = wp.media.template( 'attachment-custom' );

Should be:

wp.media.view.Attachment.prototype.template = wp.media.template( 'attachment_custom' );