fix: proper height data for animated gifs

payloadcms · Apr 17, 2023 · 1427d1f · 1427d1f
1 parent 6ceb791
commit 1427d1f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/src/uploads/generateFileData.ts b/src/uploads/generateFileData.ts
@@ -108,10 +108,13 @@ export const generateFileData = async <T>({
     }
 
     if (sharpFile) {
+      const metadata = await sharpFile.metadata();
       fileBuffer = await sharpFile.toBuffer({ resolveWithObject: true });
-      ({ mime, ext } = await fromBuffer(fileBuffer.data));
+      ({ mime, ext } = await fromBuffer(fileBuffer.data)); // This is getting an incorrect gif height back.
       fileData.width = fileBuffer.info.width;
-      fileData.height = fileBuffer.info.height;
+
+      // Animated GIFs aggregate the height from every frame, so we need to use divide by number of pages
+      fileData.height = sharpOptions.animated ? (fileBuffer.info.height / metadata.pages) : fileBuffer.info.height;
       fileData.filesize = fileBuffer.data.length;
     } else {
       mime = file.mimetype;

diff --git a/test/uploads/config.ts b/test/uploads/config.ts
@@ -53,12 +53,43 @@ export default buildConfig({
         },
       ],
     },
+    {
+      slug: 'gif-resize',
+      upload: {
+        staticURL: '/media-gif',
+        staticDir: './media-gif',
+        mimeTypes: ['image/gif'],
+        resizeOptions: {
+          position: 'center',
+          width: 200,
+          height: 200,
+        },
+        formatOptions: {
+          format: 'gif',
+        },
+        imageSizes: [
+          {
+            name: 'small',
+            width: 100,
+            height: 100,
+            formatOptions: { format: 'gif', options: { quality: 90 } },
+          },
+          {
+            name: 'large',
+            width: 1000,
+            height: 1000,
+            formatOptions: { format: 'gif', options: { quality: 90 } },
+          },
+        ],
+      },
+      fields: [],
+    },
     {
       slug: mediaSlug,
       upload: {
         staticURL: '/media',
         staticDir: './media',
-        mimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml', 'audio/mpeg'],
+        mimeTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/svg+xml', 'audio/mpeg'],
         resizeOptions: {
           width: 1280,
           height: 720,