walkingpizza / strapi-plugin-placeholder Goto Github PK
View Code? Open in Web Editor NEWServe placeholders with your Strapi images
License: MIT License
Serve placeholders with your Strapi images
License: MIT License
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
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
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?
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/');
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)
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:
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:
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
Hi there, thanks for this plugin, it is really handy!
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
.
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!
Please, update the plaiceholder to this version and turn the strapi-plugin-placeholder compatible.
Thanks in advance.
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?
Node v18 is the latest LTS version and should be supported. Currently you get an error about v16 being the latest supported version.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.