Twill: Enabling LQIP Images?

[sebastianlenton]

Hi,

I notice that Twill appears to support LQIP images, but I can't get it to work. Do I need to do something to enable this?

In the database, the lqip_data columns for the images I've uploaded so far are all NULL, and running artisan twill:lqip didn't seem to do anything.

FYI I'm using the default S3/Imgix setup for my images. Uploading and displaying images is otherwise working fine.

Can you advise re this? Apologies if I've missed something somewhere.

Thanks again, Seb

[ifox]

Hi Seb,

you discovered one of Twill's secrets 🤫

Just kidding, there's an extra step you need to do, sorry about missing that part in the documentation (but thanks for asking, this will benefit everyone!)

If you check the source of the twill:lqip command, you'll notice on line 23 that it is reading a lqip configuration file.

The content of this configuration file needs to look like the following:

<?php

return [
    'App\Models\Project' => [
        'cover' => [
            'default' => 10
        ],
        ...
    ],
    ...
];

For each model and image role/crop you want an LQIP generated, you'd add an entry in this configuration file, the value being the width of the generated LQIP. This along with LQIP parameters in the Imgix options can produce different results, give it a try, it's fun!

The lqip_data column then contains the base64 representation of the LQIP, which you can inline in your rendered markup as a background of an image container, along with the intrinsic ratio technique and lazy-loading for example.

To keep LQIP updated with CMS updates, we used 2 different approaches at AREA 17:

• scheduling the artisan command, for example every 10 minutes. When saving a form with image fields, the lqip_data resets to NULL to avoid inconsistencies while loading. The -> lowQualityImagePlaceholder helper provided by the HasMedias trait gives you a fallback to a transparent GIF when lqip_data is empty.

$schedule->command('twill:lqip')->everyTenMinutes();

• queuing a job that calls the command right after a CMS module update by listening to Twill's events in your EventServiceProvider:

Event::listen('cms-module.saved', function () {
    RefreshLQIP::dispatch();
});

<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Log;
use Artisan;

class RefreshLQIP implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    /**
     * Create a new job instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle()
    {
        Artisan::call('twill:lqip');
        Log::notice("Refresh LQIP in progress");
    }
}

Hope that helps!

[sebastianlenton]

Thanks for going into so much detail- this is very useful! I'll give it a try once I've got a little further with my project.