PHPackages                             tobimori/kirby-blurhash - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. tobimori/kirby-blurhash

Abandoned → [tobimori/kirby-thumbhash](/?search=tobimori%2Fkirby-thumbhash)ArchivedKirby-plugin

tobimori/kirby-blurhash
=======================

Image placeholders with the optimized BlurHash integration

1.2.0(3y ago)351.4k1[3 issues](https://github.com/tobimori/kirby-blurhash/issues)MITPHPPHP >=8.0.0

Since Jan 5Pushed 6mo ago2 watchersCompare

[ Source](https://github.com/tobimori/kirby-blurhash)[ Packagist](https://packagist.org/packages/tobimori/kirby-blurhash)[ Docs](https://github.com/tobimori/kirby-blurhash#readme)[ GitHub Sponsors](https://github.com/tobimori)[ RSS](/packages/tobimori-kirby-blurhash/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (9)Dependencies (3)Versions (10)Used By (0)

> This plugin is unmaintained. Please use [Kirby ThumbHash](https://github.com/tobimori/kirby-thumbhash) instead.

[![Kirby BlurHash Banner](./.github/banner.png)](./.github/banner.png)

Kirby BlurHash
==============

[](#kirby-blurhash)

[BlurHash](https://blurha.sh) is an optimized image placeholder algorithm, developed at Wolt. Placeholders are represented by small ∼20-50 bytes hashes, instead of larger (∼1kB+) base64-encoded images.

This plugin adds BlurHash support to Kirby 3, allowing you to implement UX improvements such as progressive image loading or content-aware spoiler images [like Mastodon](https://blog.joinmastodon.org/2019/05/improving-support-for-adult-content-on-mastodon/).

Under the hood, the heavy work gets done by a PHP implementation of BlurHash by [kornrunner](https://github.com/kornrunner): [kornrunner/php-blurhash](https://github.com/kornrunner/php-blurhash)

Be aware that BlurHash currently has [no support for transparency](https://github.com/woltapp/blurhash/issues/100), so it will be rendered in black.

Requirements
------------

[](#requirements)

- Kirby 3.9.2+ for asset methods
- PHP 8.0+
- `gd` extension [(required by Kirby)](https://getkirby.com/docs/guide/quickstart#requirements)

Installation
------------

[](#installation)

### Download

[](#download)

Download and copy this repository to `/site/plugins/kirby-blurhash`.

### Composer

[](#composer)

```
composer require tobimori/kirby-blurhash

```

Usage
-----

[](#usage)

### Client-side decoding

[](#client-side-decoding)

#### **`$file->blurhash()`**

[](#file-blurhash)

> Encodes the image with BlurHash and returns BlurHash as a string

The default implementation of BlurHash expects the string to be decoded on the client-side, using a library like [Wolt's blurhash](https://github.com/woltapp/blurhash/tree/master/TypeScript) or [fast-blurhash](https://github.com/mad-gooze/fast-blurhash).

This provides the most benefits, most notably including better color representation and smaller payload size, but requires the initial execution of such a library on the client-side, and thus is better used with a headless site or heavily makes use of client-side infinite scrolling/loading.

An example implementation generating a placeholder image using the BlurHash string could look like this:

```