Strapi plugin logo for Placeholder

Placeholder
Plugin verified by Strapi

Automatically generate base64 placeholders for Media Library images

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

Install now

npm install strapi-plugin-placeholder

STATS

30 GitHub stars1170 weekly downloads

Last updated

385 days ago

Strapi Version

4.1.5 and above

Author

github profile image for @WalkingPizza
@WalkingPizza

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.