我假设您需要在附件详细信息屏幕中向用户显示所有大小的图像url。
使用下划线/主干线,我们可以扩展附件详细信息视图,方式与我之前的回答类似here 并基于核心媒体观点:
<!-- 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>
以及
<!-- 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>
然后将其连接到
print_media_templates
行动
在这里,我们不需要覆盖render()
方法,完成时here 通过@kalimah应用程序,因为我们覆盖了events()
方法。
可用的图像大小可以通过image_size_names_choose
过滤器,其中默认值为缩略图、中、大和全。
下面是一个示例:
使用attachment_fields_to_edit
筛选,例如,我们可以通过attachment_fields_to_edit
过滤器,以显示每个图像大小的图像url:
下面是一个演示插件:
<?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 );
使用media_meta
过滤器类似于attachment_fields_to_edit
示例,但显示在元信息中,没有表单字段设置。