Getting Started

Installation: Add the package via Composer:
```
composer require ralphjsmit/laravel-glide
```
No additional configuration is required for basic usage.
First Use Case: Replace static image tags in Blade templates with the glide()->src() helper. For example:
```
<img {{ glide()->src('path/to/image.jpg') }} alt="Description">
```
This automatically generates a responsive <img> tag with srcset and loading="lazy" attributes.
Verify Output: Inspect the rendered HTML to confirm the srcset includes dynamically generated URLs for different widths (e.g., ?width=400, ?width=800).

Implementation Patterns

Responsive Image Generation:
- Use glide()->src('path/to/image.jpg', maxWidth) to generate a responsive image with a maximum width constraint.
- Example: Limit an image to 1200px for a hero section:
```
<img {{ glide()->src('hero.jpg', 1200) }} alt="Hero Image">
```
- The package auto-generates srcset with widths up to the specified maxWidth (e.g., 400w, 800w, 1200w).
Custom sizes Attribute:
- Define responsive breakpoints for the sizes attribute to hint browsers about image dimensions at different viewports.
- Example: Full-width on mobile, 50% width on desktop:
```
<img {{ glide()->src('product.jpg', 800, sizes: '(max-width: 768px) 100vw, 50vw') }} alt="Product">
```
Lazy Loading:
- Disable lazy loading for above-the-fold images (default is loading="lazy"):
```
<img {{ glide()->src('logo.png', lazy: false) }} alt="Logo">
```
SVG Handling:
- SVG files are rendered directly without srcset generation (avoids unnecessary processing).
URL Scoping:
- Restrict Glide URLs to a specific domain (e.g., CDN) via config:
```
'domain' => env('GLIDE_DOMAIN', null),
```

Dynamic Paths:
- Use Laravel’s asset() or model paths (e.g., glide()->src($product->imagePath)) for dynamic image sources.
Caching:
- Leverage Glide’s built-in caching (stored in storage/framework/cache/glide). Clear cache manually or via:
```
php artisan glide:clear
```
- Add this to deployment scripts for production.
Custom Configurations:
- Publish the config file for advanced settings (e.g., disk support, upscaling limits):
```
php artisan vendor:publish --tag=glide-config
```
- Modify config/glide.php to adjust:
  - scales: Custom width array (e.g., [300, 600, 1200]).
  - grow: Allow images to exceed original dimensions (default: true).
  - upscale: Disable upscaling (default: true).

Component Integration:

Create reusable Blade components for consistent image usage:

@component('components.responsive-image', ['path' => 'banner.jpg', 'maxWidth' => 1600])
@endcomponent

Testing:

Mock Glide URLs in tests using Laravel’s HTTP testing tools:

$response = $this->get('/glide/path/to/image.jpg?width=400');
$response->assertStatus(200);

Cache Invalidation:
- Issue: Modifying an existing image (not adding new ones) won’t trigger cache updates. Old URLs may return stale images.
- Fix: Run php artisan glide:clear after editing images or automate it in deployment pipelines.
SVG Misconfiguration:
- Issue: SVGs generate srcset attributes unnecessarily, which can bloat HTML.
- Fix: The package skips srcset for SVGs by default (no action required).
URL Encoding:
- Issue: Spaces or special characters in filenames may cause 404 errors.
- Fix: Use hyphens/underscores in filenames or rely on Glide’s automatic URL encoding (handled internally).
Upscaling Behavior:
- Issue: Images may upscale beyond original dimensions, increasing file size.
- Fix: Disable upscaling in config:
```
'upscale' => false,
```
- Or limit via grow:
```
'grow' => false,
```
Domain Scoping:
- Issue: Glide URLs may not resolve if the domain config is misconfigured (e.g., pointing to a non-existent CDN).
- Fix: Verify config/glide.php and ensure the domain is reachable.
Disk Support:
- Issue: Custom disk paths (e.g., S3) require explicit configuration.
- Fix: Publish the config and set:
```
'disk' => 's3',
```
- Ensure the disk is configured in config/filesystems.php.

Inspect Generated HTML:
- Use browser dev tools to verify srcset and sizes attributes. Check for missing or malformed URLs.
Check Cache Directory:
- Verify cached images exist in storage/framework/cache/glide. Empty the directory if stale images persist.
Glide Logs:
- Enable debug logging in config/glide.php:
```
'debug' => true,
```
- Check Laravel logs (storage/logs/laravel.log) for Glide-related errors.
Test with curl:
- Validate Glide endpoints directly:
```
curl "https://your-app.com/glide/path/to/image.jpg?width=800"
```
- Look for 200 OK responses and correct image dimensions.
Disable Caching Temporarily:
- For development, clear the cache frequently or disable it via config:
```
'cache' => false,
```

Custom Scales:
- Override default scales in config:
```
'scales' => [200, 400, 800, 1200, 1600],
```
Image Processing:
- Extend Glide’s functionality by chaining methods (e.g., filters, formats):
```
<img {{ glide()->src('image.jpg', 800, format: 'webp', blur: 10) }} alt="Blurred Preview">
```
- Supported options: format, blur, sharpen, resize, etc.
Middleware Integration:
- Add custom middleware to Glide routes (e.g., authentication for private images):
```
Route::middleware(['glide'])->group(function () {
    // Glide routes
});
```

Event Listeners:

Listen for Glide cache events (e.g., post-image-upload):

Glide::listen('cache.miss', function ($path) {
    Log::info("Generated image: {$path}");
});

Custom Directives:

Create a Blade directive for reusable Glide logic:

Blade::directive('glideImage', function ($expression) {
    return "<?php echo glide()->src({$expression}); ?>";
});

Usage:

<img @glideImage("path/to/image.jpg") alt="Dynamic Image">