[middlesister]

I found the solution, and I’m writing here so others can benefit.

If you inspect the object you get back from selecting the image, you’ll see all the properties and methods you have available. For the example block with Media Upload button, place your console.log inside the onSelectImage expression:

const onSelectImage = img => {
	console.log(img);
…

The sizes property contains objects for all the available sizes. So to select a specific size the whole onSelectImage would become:

const onSelectImage = img => {
	setAttributes({
		imgID: img.id,
		imgURL: img.sizes.[SIZE NAME].url,
		imgAlt: img.alt,
	});
};

In my case imgURL: img.sizes.thumbnail.url

Hope this helps anyone!

[Author]

Posts