feat: add more info on aspect ratio error and blurhash

zapal-tech · Oct 17, 2023 · e921b9d · e921b9d
1 parent 2039f5e
commit e921b9d
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "payload": "^2.0.7",
+    "payload-blurhash-plugin": "^1.2.0",
     "payload-plugin-phone-field": "^1.0.6",
     "react": "^18.2.0",
     "slugify": "^1.6.6",

diff --git a/src/collections/media/AuthorPhotos.ts b/src/collections/media/AuthorPhotos.ts
@@ -18,7 +18,7 @@ const AuthorPhotos: CollectionConfig = {
       height: 400,
     },
     mimeTypes: ['image/png', 'image/jpeg', 'image/webp', 'image/avif'],
-    formatOptions: { format: 'webp', options: { smartSubsample: true, quality: 70 } },
+    formatOptions: { format: 'webp', options: { smartSubsample: true, quality: 85 } },
   },
   admin: {
     group: mediaGroup,

diff --git a/src/collections/media/BlogMetaImages.ts b/src/collections/media/BlogMetaImages.ts
@@ -15,7 +15,7 @@ const BlogMetaImages: CollectionConfig = {
       width: 1200,
       height: 630,
     },
-    formatOptions: { format: 'webp', options: { smartSubsample: true, quality: 60 } },
+    formatOptions: { format: 'webp', options: { smartSubsample: true, quality: 85 } },
     mimeTypes: ['image/webp', 'image/jpeg', 'image/png'],
   },
   admin: {

diff --git a/src/collections/media/ProjectImages.ts b/src/collections/media/ProjectImages.ts
@@ -14,7 +14,7 @@ const ProjectImages: CollectionConfig = {
   },
   upload: {
     mimeTypes: ['image/png', 'image/jpeg', 'image/webp', 'image/avif'],
-    formatOptions: { format: 'webp', options: { smartSubsample: true, quality: 70 } },
+    formatOptions: { format: 'webp', options: { smartSubsample: true, quality: 85 } },
     imageSizes: [
       {
         name: '700',

diff --git a/src/collections/media/TeamMemberPhotos.ts b/src/collections/media/TeamMemberPhotos.ts
@@ -14,7 +14,7 @@ const TeamMemberPhotos: CollectionConfig = {
   },
   upload: {
     mimeTypes: ['image/png', 'image/jpeg', 'image/webp', 'image/avif'],
-    formatOptions: { format: 'webp', options: { smartSubsample: true, quality: 70 } },
+    formatOptions: { format: 'webp', options: { smartSubsample: true, quality: 85 } },
     imageSizes: [
       {
         name: '700',

diff --git a/src/hooks/checkImageAspectRatio.ts b/src/hooks/checkImageAspectRatio.ts
@@ -8,5 +8,6 @@ export const checkImageAspectRatio =
     const isValidAspectRatio =
       imageAspectRatio - requiredAspectRatio > -0.001 && imageAspectRatio - requiredAspectRatio < 0.001;
 
-    if (!isValidAspectRatio) throw new Error(`Image aspect ratio must be ${x}:${y}`);
+    if (!isValidAspectRatio)
+      throw new Error(`Image aspect ratio must be ${x}:${y}. Image is ${data?.width}:${data?.height}`);
   };
diff --git a/src/payload.config.ts b/src/payload.config.ts
@@ -14,6 +14,7 @@ import {
 } from '@payloadcms/richtext-lexical';
 
 import path from 'path';
+import computeBlurhash from 'payload-blurhash-plugin';
 
 import validationEN from 'locales/en/validation';
 import validationUA from 'locales/ua/validation';
@@ -300,5 +301,8 @@ export default buildConfig({
           .href,
       tabbedUI: true,
     }),
+    computeBlurhash({
+      collections: [AuthorPhotos.slug, PartnerLogos.slug, TeamMemberPhotos.slug],
+    }),
   ],
 });