fix(gatsby-image): When art-directing images, default the padding aspect ratio to first image without a media query when no media query matches

[mjmaurer]

Description

When art directing multiple images and no media query matches, the current implementation chooses the first image with a media query.

This PR will choose the first image without media if no images match current window. This reflects what one would expect from the documentation (right now the mobile image would never be selected)
The documentation reflects what one would expect from mobile-first design.

I don't believe this is a breaking change. Any client that has media with every image will continue to work the same way. Any client that has an image without media probably expects the behavior that this PR implements.

Related Issues

Addresses documentation error mentioned above
Addresses #15189 when adding a "default" image (without media query)
Related to art direction support in #13395

[waverly]

This would be really useful - is this going to merge anytime soon?

[KyleAMathews]

nice bug fix! Thanks for finding & fixing

[gatsbot]

Holy buckets, @mjmaurer — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. We’ve got Gatsby t-shirts, stickers, hats, scrunchies, and much more. (You can also unlock even more free swag with 5 contributions — wink wink nudge nudge.) See gatsby.dev/swag for details.
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

[andrezimpel]

I am using gatsby-image 2.3.4 and unfortunately this does not work for me. When the page is loaded it is still using the aspect ratio of the first source instead of the matched one. I am logging out the image.aspectRatio and that is indeed correct when loading the page, although the paddingBottom does not get updated. As soon as I navigate to a different page and then come back it works.

Here is a preview link: https://preview.zuckerjagdwurst.com

[bogdansoare]

Aso having this issue, but only on production builds, on development it works as expected

[andrezimpel]

@bogdansoare yea, it's only happening in production!

[denisgoryaynov]

I have the same issue

[bogdansoare]

For now the easiest way to fix this is to have 2 gatsby images one for small screens and one for larger, then toggle between the 2 of them with media queries

[polarathene]

Please sub to this issue to be notified of a fix, continue discussion there.