daikazu / laravel-glider
Start using Glide on-the-fly instantly in your Laravel blade templates.
Requires
- illuminate/support: ~8|~9|~10
- intervention/image: ^2.7
- league/flysystem: ^3.0
- league/glide-laravel: ^1.0
- psr/http-message: ^1.0
Requires (Dev)
- phpunit/phpunit: ~9.4
README
Laravel Glider
Glider is a simple package to quickly get started using Glide in your Laravel blade templates. It provides some convienent blade components for generating various img related html tags. This package was heavily inspired Statamic and Spatie Media library.
Take a look at contributing.md to see a to do list.
Installation
Via Composer
composer require daikazu/laravel-glider
Configuration
Publish Configuration file and modify the setting to your specific setup.
php artisan vendor:publish --provider="Daikazu\LaravelGlider\LaravelGliderServiceProvider" --tag="glider-config"
Adjust the configuration file as needed for your setup.
The default is assuming your files are coming from /resources/assets/
folder in your project.
Note: be sure that you also have the appropriate watermarks folder.
'source' => resource_path(), 'source_path_prefix' => 'assets', 'watermarks' => resource_path(), 'watermarks_path_prefix' => 'assets/watermarks',
Usage
Glider uses native Glide syntax for URLs.
Check out the Glide API for more details.
Glider URL Builder
// Array syntax {{ Glider::url('image.jpg', ['w' => 300, 'h' => 300, 'fit' => 'crop']) }} // String syntax {{ Glider::url('image.jpg', 'w=300&h=300&fit=crop') }} or {{ Glider::url('image.jpg?w=300&h=300&fit=crop') }}
Glider Blade Components
THe following components use the width
attribute to prevent the generation of srcset image that are larger than the original image.
<x-glider-img src="image.jpg?w=300&h=300&fit=crop" width="300" height="300" > <x-glider-picture src="image.jpg?w=300&h=300&fit=crop" width="300" height="300" >
Responsive background image CSS class
{{ Glider::backgroundClass('bg-class', 'image.jpg') }}
Clear Glider image cache
php artisan glider:clear
Troubleshooting
Browser return 404s when using Nginx and custom static caching config
Make sure to NOT include your Glide route in your static caching configuration.
BROKEN EXAMPLE
#
location ~* \.(jpg|jpeg|png|ico|css|js|pdf|woff2)$ {
expires 1y;
add_header Cache-Control "public, no-transform";
}
WORKING EXAMPLE SETTINGS
# Only cache static assets limited to to /public/assets/ folder
location ~* ^/assets/.*\.(jpg|jpeg|png)$ {
expires 1y;
add_header Cache-Control "public, no-transform";
}
location ~* \.(ico|css|js|pdf|woff2)$ {
expires 1y;
add_header Cache-Control "public, no-transform";
}
Contributing
Please see contributing.md for details and a todolist.
Security
If you discover any security related issues, please email daikazu@gmail.com instead of using the issue tracker.
Credits
License
MIT. Please see the license file for more information.