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:

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.

Generate Placeholders For Existing Images

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 };