Strapi plugin logo for Wolt Blurhash

Wolt Blurhash

Generate woltapp/blurhash image hashes for generating placeholder images for media assets.

thumbnail for Wolt Blurhash

Strapi Plugin: strapi-blurhash-plugin

A plugin for Strapi CMS that generates blurhash for your uploaded images via the woltapp/blurhash algorithm.

Installation

To install, run:

npm install strapi-blurhash-plugin

Open or create the config/plugins.js file. Enable this plugin by adding:

1
2
3
4
5
6
7
8
9
10
module.exports = {
    // ...
    'strapi-blurhash-plugin': {
        enabled: true,
        config: {
            regenerateOnUpdate: true
        }
    },
    // ...
}

How to generate blurhash for an image

In the Strapi Dashboard open Content Manager. Edit one collection/single type. Add or edit a Media field type and save the collection/single type.

How to get blurhash

Target a Strapi REST API endpoint. For example:

1
localhost:1337/api/products?populate=Image.*

The response will be a JSON containing blurhash along with rest of the image data:

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
41
42
43
44
45
46
{
  "data": [
    {
      "id": 6,
      "attributes": {
        "name": "Test",
        "createdAt": "2022-10-27T14:52:04.393Z",
        "updatedAt": "2022-10-28T09:58:22.238Z",
        "Image": {
          "data": {
            "id": 80,
            "attributes": {
              "name": "image.png",
              "alternativeText": "image.png",
              "caption": "image.png",
              "width": 960,
              "height": 168,
              "formats": {
                ...
              },
              "hash": "image_ed1fbcdba0",
              "ext": ".png",
              "mime": "image/png",
              "size": 4.63,
              "url": "/uploads/image_ed1fbcdba0.png",
              "previewUrl": null,
              "provider": "local",
              "provider_metadata": null,
              "createdAt": "2022-10-28T09:42:02.471Z",
              "updatedAt": "2022-10-28T09:42:02.471Z",
              "blurhash": "U{Nd,T?bof?u_Nxuj[x[objZayoe_Mxuj[x["
            }
          }
        }
      }
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

Install now

npm install strapi-blurhash-plugin

STATS

No GitHub star yet91 weekly downloads

Last updated

58 days ago

Strapi Version

4.0.0 and above

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.