Get image thumbnail size urls in media library

This is the solution I came up with – it replaces WP’s default Full URL input with a list of any supplied thumbnail sizes right in the media library popup.

add_action( 'print_media_templates', 'ezific_media_tmpl_image_thumbnail_urls' );
function ezific_media_tmpl_image_thumbnail_urls() {

/* // The prior URL HTML; /wp-includes/media-template.php
    // found with regex in variable old_html_regex below
<label class="setting" data-setting="url">
                    <span class="name">Copy Link</span>
                    <input type="text" value="{{ data.url }}" readonly />
                </label>
                */
    ?>
    <script>
        jQuery( document ).ready( function( $ ){
            var text = "",
                old_html_regex = /<label class="setting" data-setting="url">.*<\/label>/gms,
                the_url_list = jQuery( "script#ezific-tmpl-attachment-url-list" ).text(),
                existing_tmpls = jQuery( "script#tmpl-attachment-details-two-column, script#tmpl-attachment-details" );

            // Loop through the script elements and swap in the new HTML
            existing_tmpls.each(function() {
                text = jQuery(this).text();
                text = text.replace( old_html_regex, the_url_list );
                jQuery(this).text( text );
            });

            // Add show/hide toggle
            jQuery( "body" ).on("click", "#ezific-toggle-urls", function(e){
                e.preventDefault();
                jQuery( "#ezific-image-urls-hold" ).toggle();
            });
        });
    </script>

    <script type="text/template" id="ezific-tmpl-attachment-url-list">
        <div class="setting" id="ezific-image-urls">
            <a href="#" id="ezific-toggle-urls">Show All URLS</a>
            <div id="ezific-image-urls-hold" style="display: none;">
                <?php
                $sizes = apply_filters( 'image_size_names_choose', array(
                    'thumbnail' => __('Thumbnail'),
                    'medium'    => __('Medium'),
                    'large'     => __('Large'),
                    'full'      => __('Full Size'),
                ) );
                foreach ( $sizes as $value => $name ) : ?>
                    <#
                    var size = data.sizes['<?php echo esc_js( $value ); ?>'];
                    if ( size ) { #>
                    <span class="setting">
                        <label for="attachment-details-copy-link-<?php echo esc_attr( $value ); ?>" class="name" style="float:left;"><?php echo esc_attr( $name ); ?></label>
                        <input type="text" id="attachment-details-copy-link-<?php echo esc_attr( $value ); ?>" value="{{ size.url }}" readonly />
                    </span>
                    <# } #>
                <?php endforeach; ?>
            </div>
        </div>
    </script>

    <?php
}

The basic idea is to override the WordPress-supplied media modal layout template (found in /wp-includes/media-template.php.

We hook into print_media_templates which displays several HTML templates in <script> elements to be used by I believe Backbone.js. Specifically, we care about the script#tmpl-attachment-details-two-column and script#tmpl-attachment-details templates.

We add a new template (here, script#ezific-tmpl-attachment-url-list") which holds the HTML to display the image sizes. This snippet uses the image_size_names_choose hook to filter which thumbnail sizes are shown.

Then it’s just a mattter of grabbing the template text from the WordPress provided templates, regex-replace in our new HTML and WordPress is no the wiser, it displays our new image sizes right where it originally displayed only the full URL.

I also added a quick link to show/hide the links, since the list could get fairly long theoretically.