Broken gallery block – Advanced Gutenberg Course

[ldecoker]

Hello!

When I tried to add multiple pictures in the gallery block, I got a JS error:

Uncaught (in promise) TypeError: Cannot read property 'large' of undefined

To be more precise, when click on Media Library, it’s working, not when using the Upload button.
If I check the content of the newImages variable, I can indeed see that it does only take the first selected picture.

When editing the gallery, it does include all pictures from my media library to the gallery.

Thx!

[ldecoker]

Hello!

The errors I’ve got came from this code (from github):

const onSelectImages = newImages => {
      const images = newImages.map(img =>
        Object.assign(
          {},
          {
            src: img.sizes.large.url,
            width: img.sizes.large.width,
            height: img.sizes.large.height,
            id: img.sizes.large.id,
            alt: img.sizes.large.alt,
            caption: img.sizes.large.caption
          }
        )
      );
      setAttributes({ images });
    };

First I had to change large by full and then for the id/alt/caption field, you need to remove the sizes.large part.

Have a nice day!

[Zac Gordon]

Thanks for sharing!

Our of curiosity, what were the sizes of the images you were using?

[ldecoker]

Hello!

I used the ones from your advanced course.

Have a nice day!

[chrisdavies71]

Hi Zac,

Looks like the way that you get the various sizes has changed again in Gutenberg and we now need to use the media_details object. Something like:

img.media_details.sizes.thumbnail.source_url

However i get this error:

Uncaught TypeError: can't access property "sizes", img.media_details is undefined

Any thoughts where I am going wrong?

Cheers

Chris

[Author]

Posts