Socket
Book a DemoInstallSign in
Socket

strapi-blurhash

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

strapi-blurhash

A plugin that generates blurhash for your uploaded images

2.0.0
latest
npmnpm
Version published
Weekly downloads
239
57.24%
Maintainers
1
Weekly downloads
 
Created
Source

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:

module.exports = {
    ...
    'strapi-blurhash': {
      enabled: true,
      config: {
        regenerateOnUpdate: true,
        forceRegenerateOnUpdate: false,
      }
    },
  }

Config explanations:

  • If forceRegenerateOnUpdate is true, the plugin disregards whether the blurhash already exists and generates a new one.
  • If regenerateOnUpdate is true (and forceRegenerateOnUpdate is false), the blurhash will only be generated if it is currently missing. This is a more conservative approach that avoids unnecessary processing but ensures blurhashes are eventually generated for all images.

Both of these values are going to be false if omitted.

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:

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

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

{
  "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
    }
  }
}

Regenerating Existing Content

If you've recently installed this plugin and already have existing media content, you can easily update the blurhash for these items. Use the Regenerator plugin to efficiently handle this task:

This additional plugin can automate the process.

npm blurhash package

github blurhash source

Changelog

All notable changes to this project will be documented in this section.

[1.2.1]

Changed

  • now using sharp instead of canvas due to issues with .webp images.

[1.2.2]

Added

  • forceRegenerateOnUpdate configuration option to force the regeneration of blurhash on every update, regardless of the existing blurhash.

[1.2.3]

Fixed

  • fixed a bug with the image url

[1.2.4]

Fixed

  • fixed a bug with the image url var

[1.2.5]

Changed

  • updated the readme file

[1.2.6]

Changed

  • updated tags

[1.2.7]

Fixed

  • fixed forceRegenerateOnUpdate defaults

Changed

  • added additional explanation to readme

[1.3.0]

Changed

  • removed sharp dependency

Keywords

strapi

FAQs

Package last updated on 27 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.