invakid404 / payload-blurhash-plugin Goto Github PK

View Code? Open in Web Editor NEW

48.0 2.0 4.0 492 KB

Payload CMS plugin for automatic Blurhash encoding of images

License: The Unlicense

TypeScript 73.84% JavaScript 26.16%

payload payload-plugin payloadcms blurhash

payload-blurhash-plugin's Introduction

payload-blurhash-plugin

Payload CMS plugin for automatic Blurhash encoding of images.

Getting started

Install the package with npm i payload-blurhash-plugin or yarn add payload-blurhash-plugin.
Add the plugin to your payload.config.ts:

import computeBlurhash from 'payload-blurhash-plugin';

export default buildConfig({
  /* ... */
  plugins: [
    computeBlurhash(),
  ],
});

Plugin options

Optionally, you can pass the following options to tweak the behavior of the plugin:

export interface BlurhashPluginOptions {
  /*
   * Array of collection slugs that the plugin should apply to.
   * By default, the plugin will apply to all collections with `upload` properties.
   */
  collections?: CollectionConfig['slug'][];

  /*
   * Width to resize the image to prior to computing the blurhash.
   * Default: 32
   */
  width?: number;

  /*
   * Height to resize the image to prior to computing the blurhash.
   * Default: 32
   */
  height?: number;

  /*
   * X component count to pass to the Blurhash library.
   * Default: 3
   */
  componentX?: number;

  /*
   * Y component count to pass to the Blurhash library.
   * Default: 3
   */
  componentY?: number;

  /*
   * Pattern to determine which MIME types to target
   * Default: image/*
   */
  mimeTypePattern?: string;
}

The defaults are chosen somewhat arbitrarily, they are just values that I've found to work nicely for me.

payload-blurhash-plugin's People

Contributors

Stargazers

Watchers

Forkers

legion-zver piyushchauhan2011 raffaeleparisi mlabrum

payload-blurhash-plugin's Issues

Add check for mimeType before trying to create the blurhash

I have stumbled upon the following:

My "media" collection supports PDF / Images and Videos. I have noticed that when the plugin is activated, I can't upload videos (that what has been tested) due to the fact that it seems to try to create a blurshash even though it is not an image file.

Looking into the source code I could not find something like that either (but maybe I am blind).

Could you please provide a check for the mimetype? kindly asking.

Issues after sharp update to 0.30.7

I saw that sharp was updated from 0.29.3 to 0.30.7 and after that update, I got some issues.

On my windows machine:

Error: 
Something went wrong installing the "sharp" module

The specified procedure could not be found.
\\?\C:\Users\*\Documents\*\backend\node_modules\payload-blurhash-plugin\node_modules\sharp\build\Release\sharp-win32-x64.node

On my ubuntu server when I upload a file:
node: symbol lookup error: /root/*/backend/node_modules/payload-blurhash-plugin/node_modules/sharp/build/Release/sharp-linux-x64.node: undefined symbol: vips_fail_on_get_type

My proposal:

We use the sharp lib only here:
https://github.com/invakid404/payload-blurhash-plugin/blob/master/src/index.ts#L71

Maybe we can dump the whole lib and replace it with a canvas

Its also way lighter to run and bundle:
https://bundlephobia.com/package/[email protected]
https://bundlephobia.com/package/[email protected] (we need to polyfill it for node)

Any thoughts? I can create a pr if its a solution

Project restructure and automated testing

I think the project can improve a lot if we restructure some files to make the source code more readable. And add some automated testing into the project for quality insurance

Add Related GitHub Topics

Hey invakid404, the Payload team is trying to aggregate all of the plugins for payload on this page here: https://github.com/topics/payload-plugin

It would be great if you could add a few topics to your repo to make it show up there: payload-plugin, payload, and payloadcms. This is done by clicking the gear icon on the right side of your repo's main page. Thanks! 👍

Crash after uploading image

When I upload a new image I get the error;

TypeError: Cannot read properties of undefined (reading 'config')
    at getMediaDirectory (C:\Users\*\Documents\*\backend\node_modules\payload-blurhash-plugin\src\index.ts:11:32)
    at C:\Users\*\Documents\*\backend\node_modules\payload-blurhash-plugin\src\index.ts:64:24
    at step (C:\Users\*\Documents\*\backend\node_modules\payload-blurhash-plugin\lib\index.js:67:23)
    at Object.next (C:\Users\*\Documents\*\backend\node_modules\payload-blurhash-plugin\lib\index.js:48:53)
    at C:\Users\*\Documents\*\backend\node_modules\payload-blurhash-plugin\lib\index.js:42:71
    at new Promise (<anonymous>)
    at __awaiter (C:\Users\*\Documents\*\backend\node_modules\payload-blurhash-plugin\lib\index.js:38:12)
    at hook (C:\Users\*\Documents\*\backend\node_modules\payload-blurhash-plugin\lib\index.js:102:20)
    at C:\Users\*\Documents\*\backend\node_modules\payload\src\collections\operations\update.ts:176:19
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

"payload": "^1.0.11",

TypeError: The "path" argument must be of type string. Received undefined

I am not sure if it's an error on my end, but I receive this error when trying to save an existing image.

My Collection Config:

  upload: {
    adminThumbnail: 'card',
    staticDir: 'media',
    mimeTypes: ['image/*', 'application/pdf', 'video/mp4', 'video/Ogg', 'video/WebM'],
    ...
    ],
  },

The error appears here:

 mediaDir = getMediaDirectory(req.payload, req.collection);
 filepath = path.join(mediaDir, data.filename);

Incompatibility with cloud storage plugin

Heya 👋🏻

Just wanted to notify that this plugin seems incompatible with @payloadcms/plugin-cloud-storage – it breaks it and fails all uploads to S3 (in my case, I haven’t tested with the other providers).

Unless if I set disableLocalStorage of the cloud plugin to false (which defaults to true), I get the following error:

Doing so correctly sends the image to my S3 bucket but it also creates a copy locally and keeps the data pointing the latter.

PCMS 1.0.22 "Something went wrong installing sharp" when using this plugin

Hey there, first of great idea, I was just about to to do something like this myself!

Unfortunately with the latest version of Payload CMS I (1.0.22 at writing time) I am unable to use it since there seems to be a conflict with sharp. Please advise or update if possible :)