attachments - Gutenberg Block: Image resolution

Using the media upload element I created a custom Gutenberg block, that includes an image upload button.

Now I would like to achieve one of the following:

1. When an image is selected, it should select it with an image size from wordpress, like 'thumbnail', etc.

2. If that somehow doesn't work, the image should be resized in the save function, something like that:

example element(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'
                )
            },
        }
    ),
),

example element (2.):

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

        src: mediaURL,
    }
),

The reason of course is, that an image with high resolution will be displayed web optimized.

Does anyone have an idea how to achieve one of the above?

Using the media upload element I created a custom Gutenberg block, that includes an image upload button.

Now I would like to achieve one of the following:

1. When an image is selected, it should select it with an image size from wordpress, like 'thumbnail', etc.

2. If that somehow doesn't work, the image should be resized in the save function, something like that:

example element(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'
                )
            },
        }
    ),
),

example element (2.):

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

        src: mediaURL,
    }
),

The reason of course is, that an image with high resolution will be displayed web optimized.

Does anyone have an idea how to achieve one of the above?

• attachments
• media
• block-editor

Share Improve this question asked Jan 28, 2019 at 10:45 josiasjosias 19599 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I was asking the same question in the comments of another question.

The solution is (thanks to Кирилл-Меркушев), to get another URL from the onSelect Callback.

Before I had this:

function onSelectImage( media ) {
    props.setAttributes( { mediaURL: media.url } );
    props.setAttributes( { mediaID: media.id } );
}

Then I console logged the media parameter, where I could find the different size URLs, so I changed it to this for my use:

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