古腾堡块：图像分辨率

时间：2019-01-28 作者：josias

使用media upload element 我创建了一个自定义古腾堡块，其中包括一个图像上载按钮。

现在，我想实现以下目标之一：

选择图像时，应使用wordpress中的图像大小进行选择，如“缩略图”等。

如果这不起作用，则应在“保存”功能中调整图像大小，如下所示：

示例元素（1）：

el(
    MediaUploadCheck,
    {},
    el(
        MediaUpload,
        {
            size: \'thumbnail\', //or pixel size

            onSelect: onSelectImage,
            allowedTypes: [ \'image\' ],
            render: function ( obj ) {
                var open = obj.open;
                return el(
                    Button,
                    {
                        className: \'select-image\',
                        onClick: open,
                    },
                    \'Bild auswählen\'
                )
            },
        }
    ),
),
示例元素（2）：

el(
    \'img\',
    {
        size: \'thumbnail\', //or pixel size

        src: mediaURL,
    }
),
当然，原因是，高分辨率的图像将通过web优化显示。

有人知道如何实现上述目标吗？

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

我在的评论中问了同样的问题another question.

解决方案是（多亏了КиииД-МиииииириррДДД）从onSelect回调获取另一个URL。

在此之前：

function onSelectImage( media ) {
    props.setAttributes( { mediaURL: media.url } );
    props.setAttributes( { mediaID: media.id } );
}
然后，我控制台记录了媒体参数，在那里我可以找到不同大小的URL，因此我将其更改为以下内容以供使用：

function onSelectImage( media ) {
    console.log(media);
    var url;
    if (media.sizes.medium.url) {
        url = media.sizes.medium.url;
    } else if (media.sizes.thumbnail.url) {
        url = media.sizes.thumbnail.url;
    } else {
        url = media.url;
    }
    props.setAttributes( { mediaURL: url } );
    props.setAttributes( { mediaID: media.id } );
}

标签： attachments   media   block-editor   小码农  

相关推荐

使用自定义上载文件夹的Media_Handle_Upload？

我为阿凡达建立了一个自定义图像上传程序，我真的很喜欢media_handle_upload() 创建不同大小的图像。因为它们是化身，而不是帖子的数据，我不希望它们被放在默认的WordPress上传文件夹中。是否可以继续使用media_handle_upload() 同时定义自定义上载文件夹？