ImageBlurhash by blue-tomato

Create Blurhash Strings during image upload

ImageBlurhash

ImageBlurhash is a module for ProcessWire CMS which automatically generates Blurhash strings for uploaded images.

What is Blurhash?


BlurHash is a compact representation of a placeholder for an image. E.g. used for lazy loading placeholders.

More about Blurhash itself:

Usage


Installation

  1. Execute the following command in the root directory of your ProcessWire installation:
composer require blue-tomato/image-blurhash
  1. ProcessWire will detect the module and list it in the backend's Modules > Site > ImageBlurhash section. Navigate there and install it.

Configuration

Activate Blurhash in the field setting of the image: Setup > Fields > image_field > Details > Generate Blurhash Strings

API

$page->image_field->blurhash

Return's the encoded Blurhash as string or false if not existing


$page->image_field->getBlurhashDataUri(float $width, float $height)

E.g.

<img src="$page->image_field->getBlurhashDataUri(500, 300)" alt="" data-lazy="$page->image_field->size(500, 300)" />

Returns the decoded Blurhash as base64 PNG datauri for usage in an image. If not existing transparent GIF image will be returned.

Hint: If your image is 500x300 pixels, you can use 50x30 for the Blurhash Data-URI and and scale up the image with CSS. This makes Blurhash decoding faster, the data-uri smaller but the quality is still good.

Migration of existing images

For migration of existing fields there are two CLI script in the module directory

regenerateImages.php

E.g.

php regenerateImages.php

Generates for all image fields who have the createBlurhash option new Blurhashs.

generateEmptyImages.php

E.g.

php generateEmptyImages.php

Generates for all image fields who have the createBlurhash option and have no Blurhash in the database a new Blurhash.

Roadmap


Currently encoding component quality default to 4x3. In the future this value will be configurable over the field settings for each field.

Support


Please open an issue for support.

Contributing


Create a branch on your fork, add commits to your fork, and open a pull request from your fork to this repository.

To get better insights and onboard you on module implementation details just open a support issue. We'll get back to you asap.

License


Find all information about this module's license in the LICENCE.txt file.

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Twitter updates

  • Weekly update: Smooth rollout for ProcessWire 3.0.200 main/master, plus getting started on a new WP-to-PW site conversion and why they can be so rewarding— More
    20 May 2022
  • New main/master version of ProcessWire that has more than 220 commits, resolves more than 80 issues, adds numerous new features, performance improvements and optimizations, and consumes HALF the disk space of our previous release— More
    13 May 2022
  • Summary of weekly core updates for 22 April 2022 More
    22 April 2022

Latest news

  • ProcessWire Weekly #419
    In issue 419 of ProcessWire Weekly we'll check out this week's core updates, introduce a brand new recipe of the week, and more. Read on!
    Weekly.pw / 21 May 2022
  • ProcessWire 3.0.200 new master/main version
    This new main/master version has more than 220 commits, resolves more than 80 issues, adds numerous new features, performance improvements and optimizations, and consumes HALF the disk space of our previous release. This post covers all the details.
    Blog / 13 May 2022
  • Subscribe to weekly ProcessWire news

I just love the easy and intuitive ProcessWire API. ProcessWire rocks!” —Jens Martsch, Web developer