fix(contentful): limit dimensions to 4000px (#101)

ascorbic · Dec 5, 2023 · 8d84f4d · 8d84f4d
1 parent ee5a248
commit 8d84f4d
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/src/transformers/contentful.test.ts b/src/transformers/contentful.test.ts
@@ -55,4 +55,62 @@ Deno.test("contentful", async (t) => {
       "https://images.ctfassets.net/aaaa/xxxx/yyyy/how-to-wow-a-customer.jpg?fit=crop&w=200",
     );
   });
+
+  await t.step("should bracket width if > 4000", () => {
+    const result = transform({
+      url: img,
+      width: 5000,
+    });
+    assertEquals(
+      result?.toString(),
+      "https://images.ctfassets.net/aaaa/xxxx/yyyy/how-to-wow-a-customer.jpg?w=4000&fit=fill",
+    );
+  });
+
+  await t.step("should adjust height proportionally if width > 4000", () => {
+    const result = transform({
+      url: img,
+      width: 5000,
+      height: 2000,
+    });
+    assertEquals(
+      result?.toString(),
+      "https://images.ctfassets.net/aaaa/xxxx/yyyy/how-to-wow-a-customer.jpg?w=4000&h=1600&fit=fill",
+    );
+  });
+
+  await t.step("should bracket height if > 4000", () => {
+    const result = transform({
+      url: img,
+      height: 5000,
+    });
+    assertEquals(
+      result?.toString(),
+      "https://images.ctfassets.net/aaaa/xxxx/yyyy/how-to-wow-a-customer.jpg?h=4000&fit=fill",
+    );
+  });
+
+  await t.step("should adjust width proportionally if height > 4000", () => {
+    const result = transform({
+      url: img,
+      width: 2000,
+      height: 5000,
+    });
+    assertEquals(
+      result?.toString(),
+      "https://images.ctfassets.net/aaaa/xxxx/yyyy/how-to-wow-a-customer.jpg?w=1600&h=4000&fit=fill",
+    );
+  });
+
+  await t.step("it should adjust width and height if both are > 4000", () => {
+    const result = transform({
+      url: img,
+      width: 6000,
+      height: 4500,
+    });
+    assertEquals(
+      result?.toString(),
+      "https://images.ctfassets.net/aaaa/xxxx/yyyy/how-to-wow-a-customer.jpg?w=4000&h=3000&fit=fill",
+    );
+  });
 });
diff --git a/src/transformers/contentful.ts b/src/transformers/contentful.ts
@@ -29,6 +29,20 @@ export const transform: UrlTransformer = (
   { url: originalUrl, width, height, format },
 ) => {
   const url = toUrl(originalUrl);
+  if (width && width > 4000) {
+    if (height) {
+      height = Math.round(height * 4000 / width);
+    }
+    width = 4000;
+  }
+
+  if (height && height > 4000) {
+    if (width) {
+      width = Math.round(width * 4000 / height);
+    }
+    height = 4000;
+  }
+
   setParamIfDefined(url, "w", width, true, true);
   setParamIfDefined(url, "h", height, true, true);
   setParamIfDefined(url, "fm", format);