PyaeHein / Laravel LQIP

Laravel LQIP package, which includes:

• low quality image auto creating ;
• replace src with lazysize

Install on Laravel 5.4

1. Run in your terminal:

$ composer require pyaehein/laravellqip

2. Add the service providers in config/app.php:

PyaeHein\LQIP\LQIPServiceProvider::class,

3. Then run a few commands in the terminal:

$ php artisan vendor:publish

4. Add the script in your blade's head

<script src="{{ asset('vendor/lqip/lazysizes/lazysizes.min.js')}}" async=""></script>

<style>
	.blur-up {
		-webkit-filter: blur(25px);
		filter: blur(25px);
		transition: filter 400ms, -webkit-filter 400ms;
	}

	.blur-up.lazyloaded {
		-webkit-filter: blur(0);
		filter: blur(0);
	}
</style>

5. Apply your image like this

<img {!! lqip('helloworld.jpg') !!} class="lazyload blur-up" >

6. Add storage disk at filesystems.php

'lqip' => [
            'driver' => 'local',
            'root' => public_path('uploads/images')
        ],

7. Change your lqip config at config/lqip.php

return [

    'path' => 'uploads/images',

    'disk' => 'lqip',

    'prefix' => '_lqip',

    'format' => 'jpg',

    'blur' => '99', // 0 to 100

    'quality' => '1' // 0 to 100

];

Remember

Config file's 'path' is used for Image Library Intervention to auto create lqip image. Because, it doesn't support laravel's filesystem. So, your lqip image can be create only in your public folder :(

Note

I just make it for my project requirement. So, it can't be match like what u want.

Credits

• Pyae Hein
• All Contributors

License

Laravel LQIP is free for non-commercial use.