Strapi plugin logo for Blurhash

Blurhash

A plugin for Strapi CMS that generates blurhash for your uploaded images

Strapi plugin strapi-blurhash

A plugin for Strapi CMS that generates blurhash for your uploaded images

Installation

To install, run:

npm install strapi-blurhash

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

1
2
3
4
5
6
module.exports = {
    ...
    'strapi-blurhash': {
      enabled: 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 blurhas

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

Last updated

38 days ago

Strapi Compatibility

4.0.0 and above

Author

github profile image for Emil Petras
Emil Petras

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.