gatsby-image: improve docs on art-directing multiple images using fixed images

[kimbaudi]

Summary

I would like better documentation how to perform art-direction on multiple images using gatsby-image plugin.

Recently, a new feature to allow art-directing multiple images was added to gatsby-image. (See #13395).

In the Art-directing multiple images section of the documentation, there is only an example for art-directing fluid images.

I would also like a code example for art-directing fixed images because it is not working as expected. (I expect a different fixed image size to show at different breakpoints, but the same fixed image size is showing at different breakpoints).

Also, there are new gatsby-image props fixedImages and fluidImages, but I have no idea how to use it.

I just replace fixed prop with fixedImages prop since they both take an array of objects. However, I get Cannot read property 'src' of undefined error.

Motivation

Why are we doing this? What use cases does it support? What is the expected outcome?

Currently, gatsby-image plugin only has documentation on art-directing fluid images. Following this documentation and code example helps me to perform art-directing on fluid images. However, there is no code example on art-directing fixed images. When I tried to perform art-directing on fixed images, I get unexpected results, which make me think either I am doing something wrong or there is a bug with this new feature.

I would really like code example on art-directing fixed images. And also an explanation on how to use new gatsby-image props fixedImages and fluidImages.