I assume you need to show the image url to the user, for all sizes, within the Attachment Details screen.
Using Underscore/Backbone
We can extend the Attachment Details View, in a similar fashion as in my previous answer here and based on the media views in the core:
<!-- Custom template part -->
<script type="text/html" id="tmpl-wpse-url-per-size">
<div class="wpse-url-per-size" style="padding-top:5px; clear:both;">
<h2>Show URL Per Image Size</h2>
<label class="setting">
<span>Size</span>
<select id="wpse-select">
<option value="">Select</option>
<# _.each( data.sizes, function ( item, size) { #>
<option value="{{item.url}}">{{size}} {{item.width}}x{{item.height}}
<# } ) #>
</select>
</label>
<label class="setting">
<span>URL</span>
<input type="text" id="wpse-url" readonly>
</label>
</div>
</div>
</script>
and
<!-- Extend the Attachment Details View -->
<script>
jQuery(document).ready( function($)
{
var m = wp.media;
m.view.Settings.AttachmentDisplay = m.view.Settings.AttachmentDisplay.extend(
{
template: function(view){
return m.template('attachment-display-settings')(view)
+ m.template('wpse-url-per-size')(
{sizes: this.options.attachment.get('sizes')}
);
},
events: _.defaults(
m.view.Settings.AttachmentDisplay.prototype.events,
{ 'change #wpse-select': 'wpse_change' }
),
wpse_change: function(e){
this.$( "#wpse-url" ).val( this.$('#wpse-select').val() );
}
} );
} );
</script>
This is then hooked into the print_media_templates
action.
Here we don’t need to override the render()
method, as done here by @kalimah-apps, since we override the events()
method instead.
The available image sizes can be filtered through the image_size_names_choose
filter, where the default ones are thumbnail, medium, large and full.
Here’s an example:
Using the attachment_fields_to_edit
filter
We can e.g. create a custom form field with a select box and a readonly input text, via the attachment_fields_to_edit
filter, to display the image url for each image size:
Here’s a demo plugin:
<?php
/**
* Plugin Name: Show Image URL For All Image Sizes
* Description: Show the image url, for all image sizes, under the 'Attachment Details'
* Plugin URI: https://wordpress.stackexchange.com/a/232404/26350
* Text Domain: wpse-url-per-size
* Version: 1.0.0
*/
add_filter( 'attachment_fields_to_edit', function( $form_fields, $post )
{
// Nothing to do if the attachment isn't an image
if( ! wp_attachment_is( 'image', $post ) )
return $form_fields;
// First option
$options = sprintf(
'<option value="">%s</option>',
esc_html__( 'Select', 'wpse-image-size-url' )
);
// Generate options for all image sizes
foreach( (array) get_intermediate_image_sizes() as $size )
{
// Fetch image url, width and height for the given size
$src = wp_get_attachment_image_src( $post->ID, $size );
if( ! is_array( $src ) )
continue;
// Generate a single option's value
$value = sprintf(
'%s %dx%d',
esc_html( $size ),
$src[1],
$src[2]
);
// Generate HTML for a single option
$options .= sprintf(
'<option value="%s">%s</option>',
esc_url( $src[0] ),
$value
);
}
// Generate HTML for the select box and input text
$html = sprintf(
'<select id="wpse-image-sizes" >%s</select>
<input type="text" id="wpse-image-url" readonly>',
$options
);
// Handle the select box change
$html .= '<script>
(function($){
$( "#wpse-image-sizes" ).on( "change", function(e) {
$( "#wpse-image-url" ).val( this.value );
});
})(jQuery);
</script>';
// Setup our custom form field
$form_fields['wpse-image-sizes'] = [
'label' => esc_html__( 'URL Per Size', 'wpse-url-per-size' ),
'input' => 'html',
'html' => $html,
];
return $form_fields;
}, 10, 2 );
Using the media_meta
filter
This would be similar as the attachment_fields_to_edit
example, but displayed within the meta info and without the form fields setup.