Gutenberg custom block plugin with custom image sizes

Question

I am using a custum gutenberg block plugin for wordpress(https://neliosoftware.com/blog/how-to-create-your-first-block-for-gutenberg/)

This block is using an image but always choosing the full size image. I would like that it chooses custom image sizes like the standard gutenberg image or gallery blocks. when browsing the web I can't find any plugin for Guteberg with these options. Can you give me any suggestion on how to get these functionalities? Is it even possible?

Thank you for all your efforts to help me.

Best Lukas

Answer 1

Yes, this can be done.

Are you using MediaUpload? Once an image is selected, MediaUpload returns that image object, which includes sizes: full, large, medium etc - this will include any custom sizes you've defined. Then, instead of assigned the url to the attribute, you save the url of the size you want.

This is demonstrated here http://jschof.com/gutenberg-blocks/wordpress-gutenberg-blocks-example-creating-a-hero-image-block-with-inspector-controls-color-palette-and-media-upload-part-2/ Under the heading "MediaUpload and the object it returns"

Ie in the Edit section of your Gutenberg block:

function onImageSelect(imageObject) {
    /* want to see the sizes returned? console log it */
    console.log(imageObject);
    setAttributes({
        backgroundImage: imageObject.sizes.full.url
    })
}

...

<div>
    <strong>Select a background image:</strong>
    <MediaUpload
        onSelect={onImageSelect}
        type="image"
        value={backgroundImage}
        render={({ open }) => (
            <button onClick={open}>
                Upload Image!
            </button>
        )}
    />
</div>

You may need a conditional to check if your image size is in the sizes, and if not use the full image.

Answer 2

In order to have custom media image sizes returned in the media object, they need to be added with image_size_names_choose:

add_action( 'init', 'DE_add_image_sizes' );
function DE_add_image_sizes() {
    /* Custom Images */
    add_image_size( "bannerLarge", 1593, 513, true );
}

add_filter( 'image_size_names_choose', 'DE_custom_sizes' );

function DE_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'bannerLarge' => __('Banner Image'),
    ) );
}

Answer 3

Couple of ways to manage the uploaded image size-

1. Define a new attribute with default image size and add that into block edit function.

2. Create inspector control with dropdown options and make the small image size the default value. From the dropdown option users' can select image size. Depeding on dropdown options CSS class will be added and these added CSS class with restrict image size.

Both of these will require adding significant amount of code. The easiest way would be to

3. Define and restrict image size in your existing image class, like "nelio-testimonial-image"