从媒体管理器获取缩略图和缩略图URL

时间:2016-07-05 作者:Kevin Mamaqi

我需要插入几个由html中的特征图像生成的缩略图,以便在我构建的滑块中使用它们。我无法通过PHP获得缩略图大小,因为它破坏了代码模块(我使用的是DIVI,一个高级主题),我想从媒体管理器或其他网站找到URL。

1 个回复
最合适的回答,由SO网友:birgire 整理而成

我假设您需要在附件详细信息屏幕中向用户显示所有大小的图像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 过滤器,其中默认值为缩略图、中、大和全。

下面是一个示例:

url per size

使用attachment_fields_to_edit 筛选,例如,我们可以通过attachment_fields_to_edit 过滤器,以显示每个图像大小的图像url:

all image sizes

enter image description here

下面是一个演示插件:

<?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 示例,但显示在元信息中,没有表单字段设置。

相关推荐

Upload media only to DB

我使用的是最新的WordPress(5.6),据我所知,没有将媒体直接上传到DB的可见设置。是否有这样一个隐藏的选项,或者WordPress不支持DB作为媒体存储而不是wp-content/uploads?我希望使用DB作为优先(或唯一,如果可能的话)存储,而不是文件系统,然后直接从DB加载媒体(如post映像)。