feat: allows upload resizing to maintain aspect ratio

payloadcms · Aug 6, 2021 · dea54a4 · dea54a4
1 parent 907f8fd
commit dea54a4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/demo/collections/Media.ts b/demo/collections/Media.ts
@@ -18,6 +18,12 @@ const Media: PayloadCollectionConfig = {
     staticDir: './media',
     adminThumbnail: ({ doc }) => `/media/${doc.filename}`,
     imageSizes: [
+      {
+        name: 'maintainedAspectRatio',
+        width: 1024,
+        height: null,
+        crop: 'center',
+      },
       {
         name: 'tablet',
         width: 640,

diff --git a/src/collections/config/schema.ts b/src/collections/config/schema.ts
@@ -84,8 +84,8 @@ const collectionSchema = joi.object().keys({
       imageSizes: joi.array().items(
         joi.object().keys({
           name: joi.string(),
-          width: joi.number(),
-          height: joi.number(),
+          width: joi.number().allow(null),
+          height: joi.number().allow(null),
           crop: joi.string(), // TODO: add further specificity with joi.xor
         }),
       ),

diff --git a/src/uploads/imageResizer.ts b/src/uploads/imageResizer.ts
@@ -41,25 +41,32 @@ export default async function resizeAndSave(
   const sizes = imageSizes
     .filter((desiredSize) => desiredSize.width < dimensions.width)
     .map(async (desiredSize) => {
+      const resized = await sharp(sourceImage)
+        .resize(desiredSize.width, desiredSize.height, {
+          position: desiredSize.crop || 'centre',
+        });
+
+      const bufferObject = await resized.toBuffer({
+        resolveWithObject: true,
+      });
+
       const outputImage = getOutputImage(savedFilename, desiredSize);
-      const imageNameWithDimensions = `${outputImage.name}-${outputImage.width}x${outputImage.height}.${outputImage.extension}`;
+      const imageNameWithDimensions = `${outputImage.name}-${bufferObject.info.width}x${bufferObject.info.height}.${outputImage.extension}`;
       const imagePath = `${staticPath}/${imageNameWithDimensions}`;
       const fileAlreadyExists = await fileExists(imagePath);
 
       if (fileAlreadyExists) {
         fs.unlinkSync(imagePath);
       }
 
-      const output = await sharp(sourceImage)
-        .resize(desiredSize.width, desiredSize.height, {
-          position: desiredSize.crop || 'centre',
-        })
-        .toFile(imagePath);
+      await resized.toFile(imagePath);
 
       return {
-        ...desiredSize,
+        name: desiredSize.name,
+        width: bufferObject.info.width,
+        height: bufferObject.info.height,
         filename: imageNameWithDimensions,
-        filesize: output.size,
+        filesize: bufferObject.info.size,
         mimeType,
       };
     });