WordPress媒体上传与大小选择 - WordPress Media Uploader with size select

我想在我自己的WordPress插件中添加一个图像输入。为此，我使用标准的WordPress媒体上传器，如：

var custom_uploader;
$('.upload_image_button').click(function(e) {
    input = $(this);
    e.preventDefault();
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Collage Image',
        library: {
            type: 'image'
        },
        button: {
            text: 'Choose Collage Image'
        },
        multiple: false,
        displaySettings: true,
        displayUserSettings: false
    });
    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        input.prev('input').val(attachment.url);
    });
    custom_uploader.open();
});

这很完美。我添加了两个与我的插件完全相同的图像大小：

if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'collage-large', 460, 660, true );
    add_image_size( 'collage-small', 460, 325, true );
}

我的问题：图片大小的选择器或更好的缩略图选择器没有显示在媒体上传表单上。我该怎么做？

您可以使用"编辑页面"网站上显示的媒体插入对话框，该对话框添加对齐、链接和大小输入字段。为此，请将frame: 'post'添加到您的选项阵列：

file_frame = wp.media.frames.file_frame = wp.media({
    title: 'Select a image to upload',
    button: {
        text: 'Use this image',
    },
    multiple: false,
    frame:    'post',    // <-- this is the important part
    state:    'insert',
});

听"插入"事件，而不是听"选择"事件。此代码显示如何检索包括大小在内的附加属性：

// When an image is inserted, run a callback.
file_frame.on( 'insert', function(selection) {
    var state = file_frame.state();
    selection = selection || state.get('selection');
    if (! selection) return;
    // We set multiple to false so only get one image from the uploader
    var attachment = selection.first();
    var display = state.display(attachment).toJSON();  // <-- additional properties
    attachment = attachment.toJSON();
    // Do something with attachment.id and/or attachment.url here
    var imgurl = attachment.sizes[display.size].url;
    jQuery( '#filenameFromURL' ).val( imgurl );
});

我在互联网上找到了一些地方。也许有用。

attachment = custom_uploader.state().get('selection').first().toJSON();

使用附件，您可以使用：

alt
作者
标题
compat（<--它是对象）
- 项目
- meta
日期
日期格式化
说明
编辑链接
文件名
高度
图标
id
链接
menuOrder
哑剧
修改的
名称
nonce（<--thi是对象）
- 删除
- 更新
- 原型
方位
大小（<--这是对象）
- full（<--这是对象）
  - 高度
  - 方位
  - url
  - 宽度
  - 原型
- 介质（<--这是对象）
  - 高度
  - 方位
  - url
  - 宽度
  - 原型
- 缩略图（<--这是对象）
  - 高度
  - 方位
  - url
  - 宽度
  - 原型
- proto（<--这是对象）
状态
亚型
所有权
类型
上传到
url
宽度

为了解决你的问题，我建议使用上面的案例20：

input.prev('input').val(attchment.sizes.collage-large.url);

希望这项工作！

你非常接近。要在管理面板中选择大小，请查看add_image_size Codex Entry:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'your-custom-size' => __('Your Custom Size Name'),
    ) );
}

因此，在您的情况下，这应该满足您的需要：

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'collage-large' => __('Collage Large'),
        'collage-small' => __('Collage Small'),
    ) );
}