Download the PHP package daikazu/laravel-glider without Composer

Laravel Glider

Laravel Glider is a powerful Laravel package that provides on-the-fly image manipulation using League/Glide. It offers elegant Blade components for generating responsive images with automatic srcset generation, URL signing for security, and seamless integration with Laravel's filesystem and caching layers.

Features

• On-the-fly Image Processing: Transform images dynamically with URL parameters
• Responsive Images: Automatic srcset generation for optimal loading
• Security: Signed URLs prevent unauthorized image manipulation
• Performance: Built-in caching with Laravel's cache system
• Flexible Sources: Support for local filesystem
• Blade Components: Clean, reusable components for your templates
• Presets: Pre-defined image manipulation configurations
• Artisan Commands: Clear cache and convert existing image tags

Installation

You can install the package via composer:

The package will automatically register its service provider.

Configuration

Publish the configuration file:

This will create a config/glider.php file. See file for more details.

Views (Optional)

You can publish and customize the Blade component views:

Usage

Basic Usage

Laravel Glider provides several ways to generate manipulated image URLs:

Using the Facade

Using Blade Components

The package provides convenient Blade components for generating image tags:

Image Manipulation Parameters

Laravel Glider supports all League/Glide manipulation parameters. Common parameters include:

Size and Cropping

Quality and Format

Effects and Filters

Using Presets

Define common image sizes in your configuration and reference them:

Responsive Images

The Blade components automatically calculate appropriate srcset values:

This generates multiple image sizes for different screen densities and viewport sizes.

Responsive Background Images

Laravel Glider provides a powerful <x-glide-bg> component for responsive background images that automatically generates CSS media queries:

Background Component Attributes

• src - Background image source path (required)
• preset - Use predefined background preset from config
• breakpoints - Array of custom breakpoints and parameters
• position - CSS background-position (default: 'center')
• size - CSS background-size (default: 'cover')
• repeat - CSS background-repeat (default: 'no-repeat')
• attachment - CSS background-attachment (default: 'scroll')
• fallback - Fallback image for loading states
• lazy - Enable lazy loading with data attributes
• Any glide-* attributes for global parameters

Using Presets for Backgrounds

Background presets are defined in your config file:

Security

URLs are automatically signed to prevent unauthorized manipulation. The signing key is derived from your application key, ensuring secure image processing.

Artisan Commands

Laravel Glider includes helpful Artisan commands:

Clear Glide Cache

Clear all cached processed images:

Convert Image Tags

Convert existing HTML img tags to use Glide components:

API Reference

Blade Component Attributes

Image Components

The <x-glide-img> and <x-glide-bg-responsive> components accept all standard HTML img attributes plus Glide parameters prefixed with glide-:

Background Component

The <x-glide-bg> component provides responsive background image functionality:

Background-Specific Attributes

• src - Background image source path (required)
• preset - Use predefined background preset from config
• breakpoints - Array of custom breakpoints and parameters
• position - CSS background-position (default: 'center')
• size - CSS background-size (default: 'cover')
• repeat - CSS background-repeat (default: 'no-repeat')
• attachment - CSS background-attachment (default: 'scroll')
• fallback - Fallback image for loading states
• lazy - Enable lazy loading with data attributes
• class - CSS classes for the container element
• Any standard HTML attributes for the container div

Glide Parameters (prefix with glide-)

• glide-w - Width in pixels
• glide-h - Height in pixels
• glide-fit - Fit mode (crop, contain, fill, stretch, max)
• glide-q - Quality (1-100)
• glide-fm - Format (jpg, png, gif, webp, avif)
• glide-blur - Blur amount (0.5-1000)
• glide-bri - Brightness (-100 to 100)
• glide-con - Contrast (-100 to 100)
• glide-gam - Gamma (0.1-9.99)
• glide-sharp - Sharpen (0-100)
• glide-filt - Filter (greyscale, sepia)
• glide-crop - Crop coordinates
• glide-bg - Background color
• glide-border - Border width and color
• glide-or - Orientation (0, 90, 180, 270)
• glide-flip - Flip direction (h, v, both)

for further details see League/Glide documentation

Configuration Options

All configuration options available in config/glider.php:

Requirements

• PHP 8.3+
• Laravel 11.x, or 12.x
• GD or Imagick PHP extension
• League/Glide 3.x

Testing

Run the test suite:

Run tests with coverage:

Run static analysis:

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Mike Wall
• All Contributors

License

The MIT License (MIT). Please see License File for more information.