带有大小选择的 WordPress 媒体上传器

Posted 2023-03-15

【中文标题】带有大小选择的 WordPress 媒体上传器

【英文标题】：WordPress Media Uploader with size select

【发布时间】：2013-12-04 19:09:04

【问题描述】：

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

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

【参考方案1】：

您可以使用“编辑页面”站点上显示的媒体插入对话框，其中添加了 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',
);

不要听“select”事件，而是听“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 );
);

【参考方案2】：

我在 Internet 上找到了一些地方。可能有用。

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

您可以使用附件：

替代 作者 标题 compat ( 项目 元 日期 日期格式化 说明 编辑链接 文件名 身高 图标 身份证 链接 menuOrder 哑剧 修改 姓名 nonce（ 删除 更新 原型 方向 尺寸（ 满（ 身高 方向 网址 宽度 原型 中等（ 身高 方向 网址 宽度 原型 缩略图（ 身高 方向 网址 宽度 原型 proto（ 状态 亚型 标题 类型 上传到 网址 宽度

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

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

希望这项工作！

【参考方案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'),
    ) );

【讨论】：

非常感谢！我认为这是我的下一个问题；）但我的问题仍然存在！我可以选择缩略图的部分不存在！