feat(gatsby-image): Add art direction

packages/gatsby-image/index.d.ts

@@ -9,6 +9,7 @@ interface FixedObject {
   tracedSVG?: string
   srcWebp?: string
   srcSetWebp?: string
+  media?: string
 }
 
 interface FluidObject {
@@ -20,13 +21,16 @@ interface FluidObject {
   tracedSVG?: string
   srcWebp?: string
   srcSetWebp?: string
+  media?: string
 }
 
 interface GatsbyImageProps {
   resolutions?: FixedObject
   sizes?: FluidObject
   fixed?: FixedObject
   fluid?: FluidObject
+  fixedImages?: FixedObject[]
+  fluidImages?: FluidObject[]
   fadeIn?: boolean
   title?: string
   alt?: string

packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap

@@ -10,13 +10,15 @@ exports[`<Image /> should render fixed size images 1`] = `
       style="background-color: lightgray; width: 100px; opacity: 1; height: 100px; transition-delay: 0.5s;"
       title="Title for the image"
     />
-    <img
-      alt=""
-      class="placeholder"
-      src="string_of_base64"
-      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 0.5s; color: red;"
-      title="Title for the image"
-    />
+    <picture>
+      <img
+        alt=""
+        class="placeholder"
+        src="string_of_base64"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 0.5s; color: red;"
+        title="Title for the image"
+      />
+    </picture>
     <picture>
       <source
         srcset="some srcSetWebp"
@@ -54,19 +56,157 @@ exports[`<Image /> should render fluid images 1`] = `
       style="background-color: lightgray; position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px; transition-delay: 0.5s;"
       title="Title for the image"
     />
-    <img
-      alt=""
-      class="placeholder"
-      src="string_of_base64"
-      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 0.5s; color: red;"
+    <picture>
+      <img
+        alt=""
+        class="placeholder"
+        src="string_of_base64"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 0.5s; color: red;"
+        title="Title for the image"
+      />
+    </picture>
+    <picture>
+      <source
+        sizes="(max-width: 600px) 100vw, 600px"
+        srcset="some srcSetWebp"
+        type="image/webp"
+      />
+      <img
+        alt="Alt text for the image"
+        crossorigin="anonymous"
+        itemprop="item-prop-for-the-image"
+        sizes="(max-width: 600px) 100vw, 600px"
+        src="test_image.jpg"
+        srcset="some srcSet"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.5s;"
+        title="Title for the image"
+      />
+    </picture>
+    <noscript>
+      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img sizes="(max-width: 600px) 100vw, 600px" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+    </noscript>
+  </div>
+</div>
+`;
+
+exports[`<Image /> should render multiple fixed image variants 1`] = `
+<div>
+  <div
+    class="fixedImage gatsby-image-wrapper"
+    style="position: relative; overflow: hidden; display: inline; width: 100px; height: 100px;"
+  >
+    <div
+      style="background-color: lightgray; width: 100px; opacity: 1; height: 100px; transition-delay: 0.5s;"
+      title="Title for the image"
+    />
+    <picture>
+      <source
+        media="only screen and (max-width: 767px)"
+        srcset="string_of_base64"
+      />
+      <source
+        media="only screen and (min-width: 768px)"
+        srcset="other_string_of_base64"
+      />
+      <img
+        alt=""
+        class="placeholder"
+        src="string_of_base64"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 0.5s; color: red;"
+        title="Title for the image"
+      />
+    </picture>
+    <picture>
+      <source
+        media="only screen and (max-width: 767px)"
+        srcset="some srcSetWebp"
+        type="image/webp"
+      />
+      <source
+        media="only screen and (max-width: 767px)"
+        srcset="some srcSet"
+      />
+      <source
+        media="only screen and (min-width: 768px)"
+        srcset="some other srcSetWebp"
+        type="image/webp"
+      />
+      <source
+        media="only screen and (min-width: 768px)"
+        srcset="some other srcSet"
+      />
+      <img
+        alt="Alt text for the image"
+        crossorigin="anonymous"
+        height="100"
+        itemprop="item-prop-for-the-image"
+        src="test_image.jpg"
+        srcset="some srcSet"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.5s;"
+        title="Title for the image"
+        width="100"
+      />
+    </picture>
+    <noscript>
+      &lt;picture&gt;&lt;source type='image/webp' srcSet="some srcSetWebp" media="only screen and (max-width: 767px)" /&gt;&lt;source srcSet="some srcSet" media="only screen and (max-width: 767px)" /&gt;,&lt;source type='image/webp' srcSet="some other srcSetWebp" media="only screen and (min-width: 768px)" /&gt;&lt;source srcSet="some other srcSet" media="only screen and (min-width: 768px)" /&gt;&lt;img width="100" height="100" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+    </noscript>
+  </div>
+</div>
+`;
+
+exports[`<Image /> should render multiple fluid image variants 1`] = `
+<div>
+  <div
+    class="fixedImage gatsby-image-wrapper"
+    style="position: relative; overflow: hidden; display: inline;"
+  >
+    <div
+      style="width: 100%; padding-bottom: 66.66666666666667%;"
+    />
+    <div
+      style="background-color: lightgray; position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px; transition-delay: 0.5s;"
       title="Title for the image"
     />
     <picture>
       <source
+        media="only screen and (max-width: 767px)"
+        srcset="string_of_base64"
+      />
+      <source
+        media="only screen and (min-width: 768px)"
+        srcset="string_of_base64"
+      />
+      <img
+        alt=""
+        class="placeholder"
+        src="string_of_base64"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition-delay: 0.5s; color: red;"
+        title="Title for the image"
+      />
+    </picture>
+    <picture>
+      <source
+        media="only screen and (max-width: 767px)"
         sizes="(max-width: 600px) 100vw, 600px"
         srcset="some srcSetWebp"
         type="image/webp"
       />
+      <source
+        media="only screen and (max-width: 767px)"
+        sizes="(max-width: 600px) 100vw, 600px"
+        srcset="some srcSet"
+      />
+      <source
+        media="only screen and (min-width: 768px)"
+        sizes="(max-width: 600px) 100vw, 600px"
+        srcset="some other srcSetWebp"
+        type="image/webp"
+      />
+      <source
+        media="only screen and (min-width: 768px)"
+        sizes="(max-width: 600px) 100vw, 600px"
+        srcset="some other srcSet"
+      />
       <img
         alt="Alt text for the image"
         crossorigin="anonymous"
@@ -79,7 +219,7 @@ exports[`<Image /> should render fluid images 1`] = `
       />
     </picture>
     <noscript>
-      &lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img sizes="(max-width: 600px) 100vw, 600px" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
+      &lt;picture&gt;&lt;source type='image/webp' srcSet="some srcSetWebp" media="only screen and (max-width: 767px)" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcSet="some srcSet" media="only screen and (max-width: 767px)" sizes="(max-width: 600px) 100vw, 600px" /&gt;,&lt;source type='image/webp' srcSet="some other srcSetWebp" media="only screen and (min-width: 768px)" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcSet="some other srcSet" media="only screen and (min-width: 768px)" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img sizes="(max-width: 600px) 100vw, 600px" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
     </noscript>
   </div>
 </div>

packages/gatsby-image/src/__tests__/index.js

@@ -23,6 +23,48 @@ const fluidShapeMock = {
   base64: `string_of_base64`,
 }
 
+const fixedImagesShapeMock = [
+  {
+    width: 100,
+    height: 100,
+    src: `test_image.jpg`,
+    srcSet: `some srcSet`,
+    srcSetWebp: `some srcSetWebp`,
+    base64: `string_of_base64`,
+    media: `only screen and (max-width: 767px)`,
+  },
+  {
+    width: 100,
+    height: 100,
+    src: `test_image_2.jpg`,
+    srcSet: `some other srcSet`,
+    srcSetWebp: `some other srcSetWebp`,
+    base64: `other_string_of_base64`,
+    media: `only screen and (min-width: 768px)`,
+  },
+]
+
+const fluidImagesShapeMock = [
+  {
+    aspectRatio: 1.5,
+    src: `test_image.jpg`,
+    srcSet: `some srcSet`,
+    srcSetWebp: `some srcSetWebp`,
+    sizes: `(max-width: 600px) 100vw, 600px`,
+    base64: `string_of_base64`,
+    media: `only screen and (max-width: 767px)`,
+  },
+  {
+    aspectRatio: 2,
+    src: `test_image_2.jpg`,
+    srcSet: `some other srcSet`,
+    srcSetWebp: `some other srcSetWebp`,
+    sizes: `(max-width: 600px) 100vw, 600px`,
+    base64: `string_of_base64`,
+    media: `only screen and (min-width: 768px)`,
+  },
+]
+
 const setup = (fluid = false, onLoad = () => {}, onError = () => {}) => {
   const { container } = render(
     <Image
@@ -45,6 +87,32 @@ const setup = (fluid = false, onLoad = () => {}, onError = () => {}) => {
   return container
 }
 
+const setupImages = (
+  fluidImages = false,
+  onLoad = () => {},
+  onError = () => {}
+) => {
+  const { container } = render(
+    <Image
+      backgroundColor
+      className={`fixedImage`}
+      style={{ display: `inline` }}
+      title={`Title for the image`}
+      alt={`Alt text for the image`}
+      crossOrigin={`anonymous`}
+      {...fluidImages && { fluidImages: fluidImagesShapeMock }}
+      {...!fluidImages && { fixedImages: fixedImagesShapeMock }}
+      onLoad={onLoad}
+      onError={onError}
+      itemProp={`item-prop-for-the-image`}
+      placeholderStyle={{ color: `red` }}
+      placeholderClassName={`placeholder`}
+    />
+  )
+
+  return container
+}
+
 describe(`<Image />`, () => {
   it(`should render fixed size images`, () => {
     const component = setup()
@@ -56,8 +124,18 @@ describe(`<Image />`, () => {
     expect(component).toMatchSnapshot()
   })
 
+  it(`should render multiple fixed image variants`, () => {
+    const component = setupImages()
+    expect(component).toMatchSnapshot()
+  })
+
+  it(`should render multiple fluid image variants`, () => {
+    const component = setupImages(true)
+    expect(component).toMatchSnapshot()
+  })
+
   it(`should have correct src, title, alt, and crossOrigin attributes`, () => {
-    const imageTag = setup().querySelector(`picture img`)
+    const imageTag = setup().querySelectorAll(`picture img`)[1]
     expect(imageTag.getAttribute(`src`)).toEqual(`test_image.jpg`)
     expect(imageTag.getAttribute(`srcSet`)).toEqual(`some srcSet`)
     expect(imageTag.getAttribute(`title`)).toEqual(`Title for the image`)
@@ -81,9 +159,9 @@ describe(`<Image />`, () => {
   it(`should call onLoad and onError image events`, () => {
     const onLoadMock = jest.fn()
     const onErrorMock = jest.fn()
-    const imageTag = setup(true, onLoadMock, onErrorMock).querySelector(
+    const imageTag = setup(true, onLoadMock, onErrorMock).querySelectorAll(
       `picture img`
-    )
+    )[1]
     fireEvent.load(imageTag)
     fireEvent.error(imageTag)