Skip to content

pyaehein/laravellqip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

PyaeHein / Laravel LQIP

Latest Version on Packagist Software License Total Downloads

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
  1. Add the service providers in config/app.php:
PyaeHein\LQIP\LQIPServiceProvider::class,
  1. Then run a few commands in the terminal:
$ php artisan vendor:publish
  1. 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>
  1. Apply your image like this
<img {!! lqip('helloworld.jpg') !!} class="lazyload blur-up" >
  1. Add storage disk at filesystems.php
'lqip' => [
            'driver' => 'local',
            'root' => public_path('uploads/images')
        ],
  1. 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

License

Laravel LQIP is free for non-commercial use.