0

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?

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.