Art direction not changing images on breakpoints.

[HenrikDK2]

On render it checks the breakpoint, but on window resize it doesn't switch out the image to the specified media query.

So in this example if the screen size is below 960px it will render a different image, but if i resize the window above 960px it doesn't switch out the image like it does in gatsby-image.

TLDR: Doesn't switch images on window resize.

...
const query = graphql`
  query {
    desktop: file(name: { eq: "bg" }, relativeDirectory: { eq: "movie" }) {
      childImageSharp {
        fluid(quality: 100, maxWidth: 3000) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    mobile: file(name: { eq: "bgMobile" }, relativeDirectory: { eq: "movie" }) {
      childImageSharp {
        fluid(quality: 100, maxWidth: 3000) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

const Movie = () => {
  const { mobile, desktop } = useStaticQuery(query);
  const sources = [
    mobile.childImageSharp.fluid,
    {
      ...desktop.childImageSharp.fluid,
      media: `(min-width: 960px)`,
    },
  ];

  return (
    <Section critical Tag="section" fluid={sources}>
        ...
    </Section>
  );
};

[timhagn]

Hi @HenrikDK2,

could you tell me in which Browsers & if it does change them on reload? Far more info necessary for

TLDR: Doesn't switch images on window resize.

(and why it should change on resize? ; )

Best,

Tim.

[github-actions[bot]]

Hi there! As @timhagn momentarily is the main contributor to this package, this issue has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs, though we're open to suggestions on how to get more maintainers! Thank you for your contributions : )!

[HenrikDK2]

It does change background images on reload, the problem is the functionality that doesn't resemble gatsby-image. Making background-image change on breakpoints when resized can make it more responsive. Some layouts depends on the background. If the background doesn't change when the device dimensions changes (Like changing orientation) it no longer haves the correct Image which may or may not ruin the layout.

[timhagn]

Ah, OK, now I get you. Uffz, that's a heavy one - as art direction is achieved by extracted media-queries. And I guess - will have to test it - that's why it doesn't change... Workaround (for the moment): ResizeObserver with key change on resize.

[twhitson]

Any updates or workarounds here? I'm currently having to display two copies of data with two separate background images which doesn't allow for SSR