Image Blur

Generates base64 encoded, downscaled and blurred versions of media library's images, which can be used…

Author:	Atte Liimatainen (profile at wordpress.org)
WordPress version required:	6.1.1
WordPress version tested:
Plugin version:	3.0.2
Added to WordPress repository:	30-11-2021
Last updated:	15-01-2024
Rating, %:	100
Rated by:	1
Plugin URI:	https://github.com/AttLii/image-blur
Total downloads:	3 089
Active installs:	90+
Click to start download

Generates base64 encoded, downscaled and blurred versions of media library’s images, which can be used f.e. as a placeholder.

Inspiration

After Wolt showcased their Blurhash technique, I wanted to make something similar to WordPress. Instead of encoding images to base83 like the food delivery company does, I went with base64 so development experience was easier.

How to start using the plugin

• Install and activate this plugin in your environment
  • The plugin should generate blurs for each image on the activation.
• Check an image’s details in your media library. It should have listing of all generated blurs.
• To get a blur to a template, use get_post_meta(). Check example theme in plugin’s repository

Customization

The plugin provides few filters, so developers can modify generated blur images to their needs. By default, generated images are 8 pixels wide and passed once through gaussian blur function, which will result in roughly 250-1000 characters long string. To change these, use following hooks:

function modify_image_blur_width( int $width ): int {
  return 15;
}
add_filter("image-blur-modify-width", "modify_image_blur_width");

function modify_gaussian_blur_strength( int $strength ): int {
  return 10;
}
add_filter("image-blur-modify-gaussian-blur-strength", "modify_gaussian_blur_strength");