大小选择的WordPress Media Uploader [英] WordPress Media Uploader with size select

问题描述

我想将图像输入添加到我自己的WordPress插件中. 为此，我使用标准的WordPress媒体上传器，如下所示:

I want to add an image input to my own WordPress plugin. For that I use the standard WordPress media-uploader like so:

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();

});

这很完美. 我添加了另外两个与我的插件完全相同的图片大小:

This works perfect. I add two more image sizes that were exact for my plugin:

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

我的问题: 媒体上载表单中未显示图像尺寸的选择器或更好的缩略图选择器.我该怎么办?

My problem: The selector for the image size or better the thumbnail selector is not shown at the media upload form. How do I do that?

推荐答案

您可以使用编辑页面"站点上显示的媒体插入对话框，该对话框会添加 alignment ， link_to 和 size 输入字段.为此，将frame: 'post'添加到您的选项数组中:

You could use the media insertion dialog as shown on the "edit page" site, which adds alignment, link_to and size input fields. To do so add frame: 'post' to your options array:

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',
});

监听插入"事件，而不是监听选择"事件.这段代码显示了如何检索包括大小的其他属性:

Instead of listening to the "select" event listen to the "insert" event. This code shows how retrieve the additional properties including the size:

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

这篇关于大小选择的WordPress Media Uploader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！