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.
