From e921b9d2a66038ac803495967f7a7eccf6882309 Mon Sep 17 00:00:00 2001 From: Bohdan Kucherivayi Date: Wed, 18 Oct 2023 00:19:41 +0300 Subject: [PATCH] feat: add more info on aspect ratio error and blurhash --- package-lock.json | 41 +++++++++++++++++++++-- package.json | 1 + src/collections/media/AuthorPhotos.ts | 2 +- src/collections/media/BlogMetaImages.ts | 2 +- src/collections/media/ProjectImages.ts | 2 +- src/collections/media/TeamMemberPhotos.ts | 2 +- src/hooks/checkImageAspectRatio.ts | 3 +- src/payload.config.ts | 4 +++ 8 files changed, 50 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8ec09fd..694ef10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@zapal/website-cms", - "version": "1.0.0", + "version": "1.1.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@zapal/website-cms", - "version": "1.0.0", + "version": "1.1.3", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -21,6 +21,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", @@ -4687,6 +4688,11 @@ "readable-stream": "^3.4.0" } }, + "node_modules/blurhash": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz", + "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==" + }, "node_modules/body-parser": { "version": "1.20.1", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", @@ -10554,6 +10560,37 @@ "node": ">=14" } }, + "node_modules/payload-blurhash-plugin": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/payload-blurhash-plugin/-/payload-blurhash-plugin-1.2.0.tgz", + "integrity": "sha512-23HKhoNPrpa1hDqVEeKRCkPEL/AOEa1xjZWhYFgK6vyK/L/WzvBGI3DOHFrhg963s/isbbZOA8D88/TUq+rH4A==", + "dependencies": { + "blurhash": "^2.0.4", + "minimatch": "^5.1.1" + }, + "peerDependencies": { + "sharp": "0.x" + } + }, + "node_modules/payload-blurhash-plugin/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/payload-blurhash-plugin/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/payload-plugin-phone-field": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/payload-plugin-phone-field/-/payload-plugin-phone-field-1.0.6.tgz", diff --git a/package.json b/package.json index effc27a..9c28ac2 100644 --- 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 index 3f7e555..8c16a86 100644 --- 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 index 28438d6..7591376 100644 --- 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 index 64d639d..56cf82b 100644 --- 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 index 527c41a..40aabf0 100644 --- 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 index c8b6832..c81664e 100644 --- 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 index 691cf3e..dc72ff4 100644 --- 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], + }), ], });