Skip to content

Commit

Permalink
fix(gatsby-image): When art-directing images, default the padding asp…
Browse files Browse the repository at this point in the history 
…ect ratio to first image without a media query when no media query matches (#21431)

* Default to image without a media query when no media queries match
window.

* update snapshots and change aspect ratio so padding is rational
  • Loading branch information
@mjmaurer
mjmaurer authored Mar 18, 2020
1 parent c76becb commit df7e93d
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 11 deletions.
14 changes: 7 additions & 7 deletions packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ exports[`<Image /> should render multiple fixed image variants 1`] = `
aria-hidden="true"
class="placeholder"
itemprop="item-prop-for-the-image"
src="other_string_of_base64"
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: 500ms; color: red;"
title="Title for the image"
/>
Expand Down Expand Up @@ -204,15 +204,15 @@ exports[`<Image /> should render multiple fixed image variants 1`] = `
height="100"
itemprop="item-prop-for-the-image"
loading="lazy"
src="test_image_2.jpg"
srcset="some other srcSet"
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 500ms;"
title="Title for the image"
width="100"
/>
</picture>
<noscript>
&lt;picture&gt;&lt;source type='image/webp' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;source srcset="some srcSet" /&gt;&lt;img loading="lazy" width="100" height="100" srcset="some other srcSet" src="test_image_2.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' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;source srcset="some srcSet" /&gt;&lt;img loading="lazy" 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>
Expand Down Expand Up @@ -278,14 +278,14 @@ exports[`<Image /> should render multiple fluid image variants 1`] = `
itemprop="item-prop-for-the-image"
loading="lazy"
sizes="(max-width: 600px) 100vw, 600px"
src="test_image_2.jpg"
srcset="some other srcSet"
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 500ms;"
title="Title for the image"
/>
</picture>
<noscript>
&lt;picture&gt;&lt;source type='image/webp' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcset="some srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img loading="lazy" sizes="(max-width: 600px) 100vw, 600px" srcset="some other srcSet" src="test_image_2.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' media="only screen and (min-width: 768px)" srcset="some other srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source media="only screen and (min-width: 768px)" srcset="some other srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcset="some srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img loading="lazy" 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>
Expand Down
51 changes: 47 additions & 4 deletions packages/gatsby-image/src/__tests__/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const fixedImagesShapeMock = [
base64: `string_of_base64`,
},
{
width: 100,
height: 100,
width: 300,
height: 300,
src: `test_image_2.jpg`,
srcSet: `some other srcSet`,
srcSetWebp: `some other srcSetWebp`,
Expand All @@ -45,15 +45,15 @@ const fixedImagesShapeMock = [

const fluidImagesShapeMock = [
{
aspectRatio: 1.5,
aspectRatio: 2,
src: `test_image.jpg`,
srcSet: `some srcSet`,
srcSetWebp: `some srcSetWebp`,
sizes: `(max-width: 600px) 100vw, 600px`,
base64: `string_of_base64`,
},
{
aspectRatio: 2,
aspectRatio: 3,
src: `test_image_2.jpg`,
srcSet: `some other srcSet`,
srcSetWebp: `some other srcSetWebp`,
Expand Down Expand Up @@ -121,6 +121,7 @@ const setupImages = (
describe(`<Image />`, () => {
const OLD_MATCH_MEDIA = window.matchMedia
beforeEach(() => {
// None of the media conditions above match.
window.matchMedia = jest.fn(media =>
media === `only screen and (min-width: 1024px)`
? {
Expand Down Expand Up @@ -280,6 +281,48 @@ describe(`<Image />`, () => {
)
})

it(`should select the image with no media query as mocked image of fluid variants provided.`, () => {
const { container } = render(
<Image
backgroundColor
className={`fluidArtDirectedImage`}
style={{ display: `inline` }}
title={`Title for the image`}
alt={`Alt text for the image`}
crossOrigin={`anonymous`}
fluid={fluidImagesShapeMock.slice().reverse()}
itemProp={`item-prop-for-the-image`}
placeholderStyle={{ color: `red` }}
placeholderClassName={`placeholder`}
/>
)
const aspectPreserver = container.querySelector(`div div div`)
expect(aspectPreserver.getAttribute(`style`)).toEqual(
expect.stringMatching(/padding-bottom: 50%/)
)
})

it(`should select the image with no media query as mocked image of fixed variants provided.`, () => {
const { container } = render(
<Image
backgroundColor
className={`fixedArtDirectedImage`}
style={{ display: `inline` }}
title={`Title for the image`}
alt={`Alt text for the image`}
crossOrigin={`anonymous`}
fixed={fixedImagesShapeMock.slice().reverse()}
itemProp={`item-prop-for-the-image`}
placeholderStyle={{ color: `red` }}
placeholderClassName={`placeholder`}
/>
)
const aspectPreserver = container.querySelector(`div div`)
expect(aspectPreserver.getAttribute(`style`)).toEqual(
expect.stringMatching(/width: 100px; height: 100px;/)
)
})

it(`should call onLoad and onError image events`, () => {
const onLoadMock = jest.fn()
const onErrorMock = jest.fn()
Expand Down
8 changes: 8 additions & 0 deletions packages/gatsby-image/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,14 @@ const getCurrentSrcData = currentData => {
if (foundMedia !== -1) {
return currentData[foundMedia]
}

// No media matches, select first element without a media condition
const noMedia = currentData.findIndex(
image => typeof image.media === `undefined`
)
if (noMedia !== -1) {
return currentData[noMedia]
}
}
// Else return the first image.
return currentData[0]
Expand Down

0 comments on commit df7e93d

Please sign in to comment.