From fc5163e897f66369a36fd937acde4412f84d52f9 Mon Sep 17 00:00:00 2001 From: Thomas Vandenhede Date: Fri, 10 Jun 2022 12:39:29 +0200 Subject: [PATCH 1/3] ensure min 1px height for blurred base64 images --- packages/gatsby-plugin-sharp/src/image-data.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts index 01b3e454e778f..5b6de4cf2e1d3 100644 --- a/packages/gatsby-plugin-sharp/src/image-data.ts +++ b/packages/gatsby-plugin-sharp/src/image-data.ts @@ -375,7 +375,10 @@ export async function generateImageData({ ...options, toFormatBase64: args.blurredOptions?.toFormat, width: placeholderWidth, - height: Math.round(placeholderWidth / imageSizes.aspectRatio), + height: Math.max( + 1, + Math.round(placeholderWidth / imageSizes.aspectRatio) + ), }, reporter, }) From 9dc8d491713ea00052da6cf6cf6f2f9285c181c1 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 26 Jul 2022 11:13:44 +0200 Subject: [PATCH 2/3] add test --- .../src/__tests__/images/wide-aspect-ratio.png | Bin 0 -> 10195 bytes .../gatsby-plugin-sharp/src/__tests__/index.js | 12 ++++++++++++ 2 files changed, 12 insertions(+) create mode 100644 packages/gatsby-plugin-sharp/src/__tests__/images/wide-aspect-ratio.png diff --git a/packages/gatsby-plugin-sharp/src/__tests__/images/wide-aspect-ratio.png b/packages/gatsby-plugin-sharp/src/__tests__/images/wide-aspect-ratio.png new file mode 100644 index 0000000000000000000000000000000000000000..c63a28149ffab2e96dc463367877d57fa639a38f GIT binary patch literal 10195 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 N002ovPDHLkV1me}NO}MO literal 0 HcmV?d00001 diff --git a/packages/gatsby-plugin-sharp/src/__tests__/index.js b/packages/gatsby-plugin-sharp/src/__tests__/index.js index 7f8400615b81d..437e60fab3ee5 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/index.js +++ b/packages/gatsby-plugin-sharp/src/__tests__/index.js @@ -549,6 +549,18 @@ describe(`gatsby-plugin-sharp`, () => { } `) }) + + it(`handles really wide aspect ratios for blurred placeholder`, async () => { + const result = await base64({ + file: getFileObject( + path.join(__dirname, `images/wide-aspect-ratio.png`) + ), + args, + }) + + expect(result.width).toEqual(20) + expect(result.height).toEqual(1) + }) }) describe(`tracedSVG`, () => { From 9c05a79e8c2164d4d35fa6f7971494edccb2fc62 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 26 Jul 2022 11:38:10 +0200 Subject: [PATCH 3/3] fix test --- packages/gatsby-plugin-sharp/src/__tests__/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/gatsby-plugin-sharp/src/__tests__/index.js b/packages/gatsby-plugin-sharp/src/__tests__/index.js index 437e60fab3ee5..e0713939fa4d2 100644 --- a/packages/gatsby-plugin-sharp/src/__tests__/index.js +++ b/packages/gatsby-plugin-sharp/src/__tests__/index.js @@ -553,7 +553,9 @@ describe(`gatsby-plugin-sharp`, () => { it(`handles really wide aspect ratios for blurred placeholder`, async () => { const result = await base64({ file: getFileObject( - path.join(__dirname, `images/wide-aspect-ratio.png`) + path.join(__dirname, `images/wide-aspect-ratio.png`), + `wide-aspect-ratio`, + `1000x10` ), args, })