具有大小选择的WordPress Media Uploader

Question

我想将图像输入添加到我自己的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 );
}

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

Answer 1

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

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

通过附件，您可以使用：

1. ALT
2. 作者
3. 标题
4. compat（＆lt; - It is Object）
   • 项目
   • 元
5. 日期
6. dateFormatted
7. 描述
8. EDITLINK
9. 文件名
10. 高度
11. 图标
12. ID
13. 链接
14. menuOrder
15. 默
16. 修饰
17. 名称
18. nonces（＆lt; - thi是对象）
    • 删除
    • 更新
    • 的原
19. 取向
20. 尺寸（＆lt; - 这是对象）
    • full（＆lt; - 这是对象）
      • 高度
      • 取向
      • URL
      • 宽度
      • 的原
    • medium（＆lt; - this is object）
      • 高度
      • 取向
      • URL
      • 宽度
      • 的原
    • 缩略图（＆lt; - 这是对象）
      • 高度
      • 取向
      • URL
      • 宽度
      • 的原
    • proto （＆lt; - this is object）
21. 状态
22. 亚型
23. 标题
24. 型
25. uploadedTo
26. URL
27. 宽度

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

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

希望这项工作！

Answer 2

您可以使用＆＃34;编辑页面＆＃34;上显示的媒体插入对话框。 site，添加 alignment ， link_to 和 size 输入字段。为此，请将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',
});

而不是听＆＃34;选择＆＃34;事件听＆＃34;插入＆＃34;事件。此代码显示了如何检索其他属性，包括大小：

// 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 );
});

Answer 3

你非常接近。要在管理面板中选择尺寸，请查看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'),
    ) );
}