Add custom image sizes to the MediaUpload

[dseidl]

I need access to the custom image sizes url's from the MediaUpload component. Even after registration of those only full and thumbnail is returned.

Include all image sizes, like ACF did or like the /media api call does.

[danielbachhuber]

I need access to the custom image sizes url's from the MediaUpload component. Even after registration of those only full and thumbnail is returned.

@dseidl Can you share more detail on what you're trying to do and how you're extending the MediaUpload component? A code snippet would be great too.

[dseidl]

@danielbachhuber sure, sorry for the limited information.

Basically i have a normal MediaUpload Component in my block.

<MediaUpload
  onSelect={ mediaChanged }
  type="image"
  value=""
  render={ ( { open } ) => (
    <Button onClick={ open } className="towa-button button button-large">
      <Dashicon icon="format-image" /> { __( 'Upload Image' ) }
    </Button>
  ) }
/>

I have also added a new custom image size via add_image_size in php.

In the onSelect event i get the image object i selected returned - but the custom sizes are missing. I need the custom Image size, actually multiple of them, because i have a picture element with multiple source sets :)

As a workaround i added that: (but thats just a workaround, of course it would be better if the custom image sizes are returned in the onSelect event):

const mediaChanged = (image) => {
  wpAPI.media().id( image.id )
    .then((response) => {
      const image = transformImage(response);
      setAttributes({image});
    });
};

The Rest API does return the custom image sizes, so i just transform the returned json so i only save the needed data (title, alt, url and the complete sizes object):

const transformImage = (image) => {
  return {
    id: image.id,
    alt: image.alt_text,
    url: image.source_url,
    sizes: image.media_details.sizes,
  }
};

[danielbachhuber]

Cool, #7605 will do the trick for you.

[florianbrinkmann]

Like described in #7605 (comment), one needs to use the image_size_names_choose filter to add custom image sizes to the img object. Is that the wanted behavior?