d'Hinnisdaël Posted October 20, 2023 Share Posted October 20, 2023 Generate image placeholders for smoother lazyloading. Currently supports ThumbHash, BlurHash, and average color placeholders. I've been using the wonderful ImageBlurhash module for this in the past, but unfortunately it's no longer in active development. This new module adds ThumbHash and Average Color placeholder algorithms, improves performance by caching generated placeholders, fixes an issue when replacing images, and allows regenerating and clearing placeholders via the admin interface. Try it out using the installation instructions below or check out the GitHub repo for details. Why use image placeholders? Low-Quality Image Placeholders (LQIP) are used to improve the perceived performance of sites by displaying a small, low-quality version of an image while the high-quality version is being loaded. The LQIP technique is often used in combination with progressive lazyloading. How it works This module will automatically generate a small blurry image placeholder for each image that is uploaded to fields configured to use them. In your frontend templates, you can access the image placeholder as a data URI string to display while the high-quality image is loading. See below for markup examples. Placeholder types The module supports generating various types of image placeholders. The recommended type is ThumbHash which encodes most detail and supports transparent images. ThumbHash is a newer image placeholder algorithm with improved color rendering and support for transparency. BlurHash is the original placeholder algorithm, developed at Wolt. It currently has no support for alpha channels and will render transparency in black. Average color calculates the average color of the image. Installation Install the module using composer from the root of your ProcessWire installation. composer require daun/processwire-image-placeholders Open the admin panel of your site and navigate to Modules → Site → ImagePlaceholders to finish installation. Configuration You'll need to configure your image fields to generate image placeholders. Setup → Fields → [images] → Details → Image placeholders There, you can choose the type of placeholder to generate. If you're installing the module on an existing site, you can also choose to batch-generate placeholders for any existing images. Usage Accessing an image's lqip property will return a data URI string of its placeholder. $page->image->lqip; // data:image/png;base64,R0lGODlhEAAQAMQAA Accessing it as a method allows setting a custom width and/or height of the placeholder. $page->image->lqip(300, 200); // 300x200px Markup Using a lazyloading library like lazysizes or vanilla-lazyload, you can show a placeholder image by using its data URI as src of the image. <!-- Using the placeholder as src while lazyloading the image --> <img src="<?= $page->image->lqip ?>" data-src="<?= $page->image->url ?>" data-lazyload /> Another technique is rendering the placeholder and the original image as separate images on top of each other. This allows smoother animations between the blurry unloaded and the final loaded state. <!-- Display placeholder and image on top of each other --> <div class="ratio-box"> <img src="<?= $page->image->lqip ?>" aria-hidden="true"> <img data-src="<?= $page->image->url ?>" data-lazyload> </div> 12 7 Link to comment Share on other sites More sharing options...
Fuzen Posted November 3, 2023 Share Posted November 3, 2023 So awesome. Thank you! Link to comment Share on other sites More sharing options...
videokid Posted December 23, 2023 Share Posted December 23, 2023 Hi, I decided to try out this module, however, I got this: Error generating image placeholder: Class "Thumbhash\Thumbhash" not found Kind regards, Link to comment Share on other sites More sharing options...
d'Hinnisdaël Posted December 23, 2023 Author Share Posted December 23, 2023 @videokid Sounds like the composer dependencies haven‘t been installed. Have you installed the module using composer? Merely installing via the admin UI won‘t work as it‘ll be missing the dependencies. Link to comment Share on other sites More sharing options...
videokid Posted December 24, 2023 Share Posted December 24, 2023 @d'Hinnisdaël Ah, no I didn't install the module using composer. I got busy with something else and today I was thinking about it, and I had a feeling it was something like that. I'll install using composer ? Thank you anyway for your answer. Link to comment Share on other sites More sharing options...
FireWire Posted September 23 Share Posted September 23 @bernhard This is the module I mentioned for generating placeholder images. Has worked very well. 1 Link to comment Share on other sites More sharing options...
FireWire Posted 9 hours ago Share Posted 9 hours ago @d'Hinnisdaël Found a bug that may cause the module to break on the next major release. Output formatting needs to be turned off before modifying a page value. I fixed it by adding `$image->page->of(false)` in the setPlaceholder module method. Link to comment Share on other sites More sharing options...
d'Hinnisdaël Posted 5 hours ago Author Share Posted 5 hours ago @FireWire Thanks for the heads-up! So you're saying it's currently working but will break in a future version of ProcessWire? Is there a specific release that triggers the issue on your end? The module should probably also reset the output formatting state to the value it was before setting it to false, just in case. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now