feat(gatsby-plugin-image): Add getLowResolutionImageURL plugin helper (…

…#29518) * feat(gatsby-plugin-image): Add getLowResolutionImageURL plugin helper * Try to use source format Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>
gatsbyjs · Feb 17, 2021 · 4b7fe37 · 4b7fe37
1 parent 99d39cc
commit 4b7fe37
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/packages/gatsby-plugin-image/src/__tests__/image-utils.ts b/packages/gatsby-plugin-image/src/__tests__/image-utils.ts
@@ -3,6 +3,7 @@ import {
   generateImageData,
   IGatsbyImageHelperArgs,
   IImage,
+  getLowResolutionImageURL,
 } from "../image-utils"
 
 const generateImageSource = (
@@ -35,7 +36,7 @@ const args: IGatsbyImageHelperArgs = {
   },
 }
 
-const fluidArgs: IGatsbyImageHelperArgs = {
+const fullWidthArgs: IGatsbyImageHelperArgs = {
   ...args,
   sourceMetadata: {
     width: 2000,
@@ -159,7 +160,7 @@ describe(`the image data helper`, () => {
   })
 
   it(`calculates sizes for fullWidth`, () => {
-    const data = generateImageData(fluidArgs)
+    const data = generateImageData(fullWidthArgs)
     expect(data.images.fallback?.sizes).toEqual(`100vw`)
   })
 
@@ -182,7 +183,7 @@ describe(`the image data helper`, () => {
   })
 
   it(`returns URLs for fullWidth`, () => {
-    const data = generateImageData(fluidArgs)
+    const data = generateImageData(fullWidthArgs)
     expect(data?.images?.fallback?.src).toEqual(
       `https://example.com/afile.jpg/750/563/image.jpg`
     )
@@ -294,4 +295,17 @@ describe(`the helper utils`, () => {
       expect(ext).toBe(expected[idx])
     }
   })
+
+  it(`gets a low-resolution image URL`, () => {
+    const url = getLowResolutionImageURL(args)
+    expect(url).toEqual(`https://example.com/afile.jpg/20/15/image.jpg`)
+  })
+
+  it(`gets a low-resolution image URL with correct aspect ratio`, () => {
+    const url = getLowResolutionImageURL({
+      ...fullWidthArgs,
+      aspectRatio: 2 / 1,
+    })
+    expect(url).toEqual(`https://example.com/afile.jpg/20/10/image.jpg`)
+  })
 })
diff --git a/packages/gatsby-plugin-image/src/image-utils.ts b/packages/gatsby-plugin-image/src/image-utils.ts
@@ -194,11 +194,33 @@ export function setDefaultDimensions(
 
     if (aspectRatio && !height) {
       height = Math.round(width / aspectRatio)
+    } else if (!aspectRatio) {
+      aspectRatio = width / height
     }
   }
   return { ...args, width, height, aspectRatio, layout, formats }
 }
 
+/**
+ * Use this for getting an image for the blurred placeholder. This ensures the
+ * aspect ratio and crop match the main image
+ */
+export function getLowResolutionImageURL(
+  args: IGatsbyImageHelperArgs,
+  width = 20
+): string {
+  args = setDefaultDimensions(args)
+  const { generateImageSource, filename, aspectRatio } = args
+  return generateImageSource(
+    filename,
+    width,
+    Math.round(width / aspectRatio),
+    args.sourceMetadata.format || `jpg`,
+    args.fit,
+    args.options
+  )?.src
+}
+
 export function generateImageData(
   args: IGatsbyImageHelperArgs
 ): IGatsbyImageData {

diff --git a/packages/gatsby-plugin-image/src/index.browser.ts b/packages/gatsby-plugin-image/src/index.browser.ts
@@ -18,6 +18,7 @@ export {
 } from "./components/hooks"
 export {
   generateImageData,
+  getLowResolutionImageURL,
   IGatsbyImageHelperArgs,
   IImage,
   ImageFormat,

diff --git a/packages/gatsby-plugin-image/src/index.ts b/packages/gatsby-plugin-image/src/index.ts
@@ -17,6 +17,7 @@ export {
 } from "./components/hooks"
 export {
   generateImageData,
+  getLowResolutionImageURL,
   IGatsbyImageHelperArgs,
   ISharpGatsbyImageArgs,
   IImage,