Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply blurhash to all existing images #214

Open
madaxen86 opened this issue Aug 22, 2024 · 6 comments
Open

Apply blurhash to all existing images #214

madaxen86 opened this issue Aug 22, 2024 · 6 comments
Assignees

Comments

@madaxen86
Copy link

It would be nice to have an option to apply the blurhash to all images where blurhash is null when the app starts.
That would be very useful when the plugin is added to an existing project where images have already been uploaded.

@invakid404
Copy link
Owner

invakid404 commented Aug 23, 2024

@madaxen86 that does indeed sound like a nice addition. Do you have a suggestion as to how this could be triggered? Some custom button in the UI somewhere perhaps? I am not sure whether it's a good idea to do this on app startup, maybe at least it'd have to be opt-in.

@madaxen86
Copy link
Author

madaxen86 commented Aug 23, 2024

I played around a little bit yesterday. Adding this to onInit should do the trick.
Let's assume that we have a plugin option "addBlurhashToExistingOnInit".
Maybe you can come up with something smarter 😅

const computeBlurhash = (pluginOptions?: BlurhashPluginOptions) => {
  //...

  return {
    ...incomingConfig,
    collections: {
      //...
    },
    onInit: async (payload) => {
      // execute existing onInit
      if (incomingConfig.onInit) await incomingConfig.onInit(payload);
     
      if (!pluginOptions.addBlurhashToExistingOnInit) return;

      const rehash = async (collection: string) => {
        const images = await payload.find({
          collection: collection as any,
          pagination: false,
          where: {
            blurhash: {
              equals: null,
            },
          },
        });

        const staticDir = path.resolve(__dirname, payload.collections[collection].config.upload.staticDir);

        images.docs.forEach(async (image) => {
          try {
            await payload.update({
              collection: collection as any,
              id: image.id,
              data: image,
              filePath: `${staticDir}/${image.filename}`,
              overwriteExistingFiles: true,
            });
          } catch (error) {
            console.error("#####", error.message, image.id, image.mimeType);
          }
        });
      };

   

      Object.entries(payload.collections).forEach(async ([key, value]) => {
        if (value.config?.upload && (!collections || collections.includes(key)) ) {
          await rehash(key);
        }
      });
    },
  };
};

@madaxen86
Copy link
Author

madaxen86 commented Aug 23, 2024

Note: This will also trigger Image transformations for all the images without an existing blurhash.
That's something to put in the doc / readme.
And not sure, but maybe this works only when the files are stored on the server, not on a remote storage like S3.

@madaxen86
Copy link
Author

@invakid404 did you have a chance to have a look at this and test it?

@invakid404
Copy link
Owner

@madaxen86 I am looking into it. I would need to support remote storage as well, as there was a feature request for that at one point, so it's important.

@invakid404 invakid404 self-assigned this Aug 26, 2024
@madaxen86
Copy link
Author

Little edit: for querying the docs, pagination:false should be passed to blurhash more than 10x images 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants