walkingpizza/strapi-plugin-placeholder

Serve placeholders with your Strapi images

strapi-plugin-placeholder's Issues

[Feature Request] Generate placeholders for previously uploaded images

It would be nice if the plugin had a button to generate placeholders for already uploaded images before the plugin was installed (or if it did it automatically). Otherwise, we need to re-upload them and in large-scale projects it might not be easy

Plaiceholder blurhash support

Blurhash is supported by Plaiceholder, can it be a configuration option to use it?

The blurhash string is nicer to work with than base64

I hardcoded the change to use blurhash in this fork, it would be nicer as a config option - https://github.com/vlowe85/strapi-plugin-placeholder

importing files fails

when importing images on a new strapi instance, strapi-placeholder plugin fails staring at the lifecycle

> npm run strapi transfer --from https:///admin # command
ENOENT: no such file or directory, open '/opt/app/public/uploads/jase_harris_AO_Z_N_Bt_GSE_unsplash_f4fb7d6b69.jpg'
Error: ENOENT: no such file or directory, open '/opt/app/public/uploads/jase_harris_AO_Z_N_Bt_GSE_unsplash_f4fb7d6b69.jpg'
    at Object.openSync (node:fs:590:3)
    at syncFileToBuffer (/opt/node_modules/plaiceholder/dist/index.js:84081:47)
    at imageSize (/opt/node_modules/plaiceholder/dist/index.js:84120:24)
    at getImageSize (/opt/node_modules/plaiceholder/dist/index.js:84152:7)
    at loadImage (/opt/node_modules/plaiceholder/dist/index.js:84205:21)
    at getImage (/opt/node_modules/plaiceholder/dist/index.js:84272:13)
    at getPlaiceholder (/opt/node_modules/plaiceholder/dist/index.js:84350:13)
    at Object.generate (/opt/node_modules/strapi-plugin-placeholder/server/services/placeholder.js:16:32)
    at Object.generatePlaceholder (/opt/node_modules/strapi-plugin-placeholder/server/bootstrap.js:20:64)
    at Object.run (/opt/node_modules/@strapi/database/lib/lifecycles/index.js:76:35)

any ideas what is causing this?

Bug: Updating images leads to an 500 error

error: Cannot read properties of undefined (reading 'startsWith')

If you update an image, the error above will be thrown because there is no mime property in the data object.

module.exports = ({ strapi }) => {
  /* Generate a placeholder when a new image is uploaded or updates */

  const generatePlaceholder = async (event) => {
    const { data } = event.params;
    if (!isValidMimeType(data.mime)) return; // data.mine is undefined.
    data.placeholder = await getService(strapi, 'placeholder').generate(data.url);
  };

  strapi.db.lifecycles.subscribe({
    models: ['plugin::upload.file'],
    beforeCreate: generatePlaceholder,
    beforeUpdate: generatePlaceholder,
  });
};

const isValidMimeType = (mimeType) => mimeType.startsWith('image/');

Collation Mismatch

migration 2022.08.26T00.00.00.generate-placeholders-for-existing-images.js (up) failed: Original error: select id, url from files where url is not null and mime like 'image/%' COLLATE utf8_bin and placeholder is null and id > 0 order by id asc limit 1000 - ER_COLLATION_CHARSET_MISMATCH: COLLATION 'utf8mb3_bin' is not valid for CHARACTER SET 'utf8mb4'
MigrationError: Migration 2022.08.26T00.00.00.generate-placeholders-for-existing-images.js (up) failed: Original error: select id, url from files where url is not null and mime like 'image/%' COLLATE utf8_bin and placeholder is null and id > 0 order by id asc limit 1000 - ER_COLLATION_CHARSET_MISMATCH: COLLATION 'utf8mb3_bin' is not valid for CHARACTER SET 'utf8mb4'
at /home/apps/hmcMainApi/node_modules/umzug/lib/umzug.js:151:27
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Umzug.runCommand (/home/apps/hmcMainApi/node_modules/umzug/lib/umzug.js:107:20)
at async Object.up (/home/apps/hmcMainApi/node_modules/@strapi/database/lib/migrations/index.js:67:7)
at async Object.sync (/home/apps/hmcMainApi/node_modules/@strapi/database/lib/schema/index.js:68:9)
at async Strapi.bootstrap (/home/apps/hmcMainApi/node_modules/@strapi/strapi/lib/Strapi.js:429:5)
at async Strapi.load (/home/apps/hmcMainApi/node_modules/@strapi/strapi/lib/Strapi.js:457:5)
at async Strapi.start (/home/apps/hmcMainApi/node_modules/@strapi/strapi/lib/Strapi.js:198:9)

Bug: 500 when trying to edit image

I've stumbled upon an issue when trying to add alternativeText to image, when you try to save it, it will throw 500 error. Uploading works just fine, there's only a problem when you click 'Finish' button in edit of an image. I've already tried your workaround from #2 but it wouldn't work in this case.

@strapi/strapi: "4.2.0"
strapi-plugin-placeholder: "^4.1.7"

How to replicate:

1. Upload an image in media library
2. Click edit button
3. Try to save
4. It should throw 500 error

Package is not maintaned, migration to continued version

strapi-plugin-placeholder-continued

As the original strapi-plugin-placeholder project is no longer maintained by its owner, I decided to create a new repository called strapi-plugin-placeholder-continued. This updated plugin includes fixes for the following issues that were left open in the previous project:

• Support for Node 18
• Errors during image replacement
• Placeholder field with value null after moving images

strapi-plugin-placeholder-continued is an active, evolving project that welcomes any issue reports and pull requests. Your contributions will help improve the plugin, and I'll be more than happy to review and merge updates.

Special thanks to @WalkingPizza for initially developing this project.
Looking forward in onboarding the current users to the new continued version.

Repository: https://github.com/yasssuz/strapi-plugin-placeholder-continued
Package: https://www.npmjs.com/package/strapi-plugin-placeholder-continued

[Bug] Placeholder attribute set to null when changing image location

Hi there, thanks for this plugin, it is really handy!

Bug Description

When uploading an image, a placeholder variable is set with a base64 string.
But when I change the location of the image -- when I put it in a folder --, the placeholder variable is set to null.

Reproduction Steps

1. Upload an image into the media library
2. Check that the placeholder attribute is set correctly
3. Edit the image to change it's location
4. Check the image's placeholder attribute again

[Feature Request] Plaiceholder 2.5.0

The plaiceholder just have been updated to 2.5.0 version, bringing more ways to customize the base64 output.
Plaiceholder now allows you to customize transparency, brightness, saturation and more!

Example

Please, update the plaiceholder to this version and turn the strapi-plugin-placeholder compatible.

Thanks in advance.

Placeholders aren't generated from api uploads

Hi,

I'm trying to figure out why placeholders arent generated when I upload media through the /api/upload endpoint. It makes sense that the lifecycle would be triggered by this.

Any thoughts?

Support node v18

Node v18 is the latest LTS version and should be supported. Currently you get an error about v16 being the latest supported version.