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:
When an image is selected, it should select it with an image size from wordpress, like 'thumbnail', etc.
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:
When an image is selected, it should select it with an image size from wordpress, like 'thumbnail', etc.
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?
Share Improve this question asked Jan 28, 2019 at 10:45 josiasjosias 1959 bronze badges1 Answer
Reset to default 1I 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 } );
}