Include all image sizes on the media upload object (if they exist)

[danielbachhuber]

Fixes #7483

[dseidl]

works for me - thanks!

[jorgefilipecosta]

Can we just leave the value undefined when sizes are not available? sizes: get( savedMedia, [ 'media_details', 'sizes' ] ). I think we don't need to return an empty object when sizes are not relevant.

This issue makes me question if mediaUpload should not just return the objects it receives from the server

[danielbachhuber]

This issue makes me question if mediaUpload should not just return the objects it receives from the server

Yes, I'm curious whether there was a deliberate decision to limit the object size. My preference would be to return the entire object (particularly because different media types have different attributes)

[danielbachhuber]

My preference would be to return the entire object (particularly because different media types have different attributes)

Although, if we do this now, we change the shape of the data returned to the callback.

[danielbachhuber]

Another option: create savedMedia.mediaDetails = {}, and the only include a sizes attribute for images with sizes. I think this is my preferred middle ground.

[danielbachhuber]

a61fce9

[jorgefilipecosta]

I think we can still use const, we are not changing the mediaObject reference we are just changing a key in the object.

[danielbachhuber]

I think we can still use const, we are not changing the mediaObject reference we are just changing a key in the object.

This is bizarre and seems like a bug. Constant means constant, or unchanging. Reassignment, even to some subset of the data, isn't permitted in PHP.

I've made the change regardless 4f3acb7

[jorgefilipecosta]

This seems to work correctly thank you for iterating on this @danielbachhuber 👍

[cfaria]

Correct me if I'm wrong but I can't see the utils folder anymore on current version 4.3, so this merge by @danielbachhuber is not there.

Hope to get those custom image sizes back.

Maybe I'm doing it wrong and I should get custom sizes with another object?

[ihdk]

Hello, is this solution available in latest release of Gutenberg? I am using Wordpress 5.0.3 (Gutenberg plugin is inacive), but media object which is returned via onSelect in MediaUpload component doesn't return my custom image size, returned are only default sizes like Thumbnail, Medium, Large and Full.
My custom image size is created correctly, image is cropped to my new size, but this size of image is not available in returned object:

sizes:
full: {url: "http:/localhost/gutenberg/wp-content/uploads/2019/02/122325929.jpg", height: 1120, width: 1500, orientation: "landscape"}
large: {height: 765, width: 1024, url: "http:/localhost/gutenberg/wp-content/uploads/2019/02/122325929-1024x765.jpg", orientation: "landscape"}
medium: {height: 224, width: 300, url: "http:/localhost/gutenberg/wp-content/uploads/2019/02/122325929-300x224.jpg", orientation: "landscape"}
thumbnail: {height: 150, width: 150, url: "http:/localhost/gutenberg/wp-content/uploads/2019/02/122325929-150x150.jpg", orientation: "landscape"}

My MediaUpload component is pretty simple so far:

<MediaUpload
	allowedTypes={['image']}
	type='image'
	value={ attributes.serviceImageObject.id }
	onSelect={ (media) => {
		console.log(media.sizes);
		setAttributes( {
			serviceImageObject: media
		} ) }
	}
	render={ ({open}) => {
		/*.........*/
	} }
/>

Thanks, Ivan.

[designsimply]

@ihdk I noticed there are some code examples at #11356 (and in the issue linked there) which look related. Can you try checking those and if you find you still need help may I please ask that you post to what you have tried to https://wordpress.org/support/forum/wp-advanced/ or https://wordpress.stackexchange.com/ as a starting point for a help request and if you confirm there that some functionality is missing can you please open a feature request at https://github.com/WordPress/gutenberg/issues/new?template=Feature_request.md ?

[ihdk]

Hello, thanks for response. I found that use of image_size_names_choose filter is needed to get all image sizes in returned object. Although defined image size readable name isn't necessary to use and isn't available in object:)
Anyway, it's working for now, thank you.
Ivan.

[lukad03]

@ihdk Can you clarify your solution? I'm seeing this issue on the MediaUpload Component with images that have already been uploaded.

[ihdk]

In my case was missing only simple filter which define the readable name of my custom image size. Without this definition of name in filter image_size_names_choose , image sizes were not present in returned object from MediaUpload.
Example of filter is here: https://codex.wordpress.org/Plugin_API/Filter_Reference/image_size_names_choose

@ihdk Can you clarify your solution? I'm seeing this issue on the MediaUpload Component with images that have already been uploaded.

[cngodles]

To leave some more direct code here for someone looking for this later. Also, the URL changed (but does redirect)

From: https://developer.wordpress.org/reference/hooks/image_size_names_choose/

Code formatted like the following would go in your functions.php file

function custom_theme_setup() {
    add_image_size( 'custom-size-1', 1200, 300, true );
    add_image_size( 'custom-size-2', 1000, 333, true );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );
 
// Make custom sizes selectable from WordPress admin.
function custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'custom-size-1' => __( 'Custom Size #1'),
        'custom-size-2' => __( 'Custom Size #2'),
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'custom_image_sizes' );

So after adding these, you would include the new names into WordPress admin. I was trying to set the custom sizes from a gutenberg return object, and my custom sizes were not available until I added this code.