Automatically generate base64 placeholders for Media Library images
Generate base64 placeholders for Strapi images.
The Placeholder plugin currently supports the following formats:
The Placeholder plugin is only compatible with Strapi v4.
# if you use NPM
npm install strapi-plugin-placeholder
# if you use Yarn
yarn add strapi-plugin-placeholder
Open or create the file config/plugins.js
and enable the plugin by adding the following snippet:
1
2
3
4
5
6
7
8
9
module.exports = {
// ...
placeholder: {
enabled: true,
config: {
size: 10,
},
},
};
For more information regarding the size
param, refer to the Plaiceholder docs.
Create the file database/migrations/generate-placeholders-for-existing-images.js
with the following content:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
'use strict';
const FILES_TABLE = 'files';
const BATCH_SIZE = 1000;
async function up(trx) {
let lastId = 0;
while (true) {
const files = await trx
.select(['id', 'url'])
.from(FILES_TABLE)
.whereNot('url', null)
.andWhereLike('mime', 'image/%')
.andWhere('placeholder', null)
.andWhere('id', '>', lastId)
.orderBy('id', 'asc')
.limit(BATCH_SIZE);
for (const file of files) {
const placeholder = await strapi
.plugin('placeholder')
.service('placeholder')
.generate(file.url);
if (placeholder)
await trx.update('placeholder', placeholder).from(FILES_TABLE).where('id', file.id);
}
if (files.length < BATCH_SIZE) {
break;
}
lastId = files[files.length - 1].id;
}
}
async function down() {}
module.exports = { up, down };
npm install strapi-plugin-placeholder
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.