Strapi Placeholder Generator

Generate base64 placeholders for Strapi images.

🖌️ Supported Content

The Placeholder plugin currently supports the following formats:

• JPEG
• PNG
• GIF
• TIFF
• SVG

✨ Supported Strapi Versions

The Placeholder plugin is only compatible with Strapi v4.

⚙️ Installation

# if you use NPM
npm install strapi-plugin-placeholder

# if you use Yarn
yarn add strapi-plugin-placeholder

🔧 Configuration

Enable The Plugin

Open or create the file config/plugins.js and enable the plugin by adding the following snippet:

1module.exports = {
2  // ...
3  placeholder: {
4    enabled: true,
5    config: {
6      size: 10,
7    },
8  },
9};

For more information regarding the size param, refer to the Plaiceholder docs.

Generate Placeholders For Existing Images

Create the file database/migrations/generate-placeholders-for-existing-images.js with the following content:

1'use strict';
2
3const FILES_TABLE = 'files';
4const BATCH_SIZE = 1000;
5
6async function up(trx) {
7  let lastId = 0;
8
9  while (true) {
10    const files = await trx
11      .select(['id', 'url'])
12      .from(FILES_TABLE)
13      .whereNot('url', null)
14      .andWhereLike('mime', 'image/%')
15      .andWhere('placeholder', null)
16      .andWhere('id', '>', lastId)
17      .orderBy('id', 'asc')
18      .limit(BATCH_SIZE);
19
20    for (const file of files) {
21      const placeholder = await strapi
22        .plugin('placeholder')
23        .service('placeholder')
24        .generate(file.url);
25
26      if (placeholder)
27        await trx.update('placeholder', placeholder).from(FILES_TABLE).where('id', file.id);
28    }
29
30    if (files.length < BATCH_SIZE) {
31      break;
32    }
33
34    lastId = files[files.length - 1].id;
35  }
36}
37
38async function down() {}
39
40module.exports = { up, down };