PHPackages justbetter/statamic-glide-directive - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. justbetter/statamic-glide-directive ActivePackage[Templating & Views](/categories/templating) justbetter/statamic-glide-directive =================================== Addon that adds a glide blade directive 4.1.1(4d ago)310.7k↓54.8%2[2 PRs](https://github.com/justbetter/statamic-glide-directive/pulls)1PHPPHP ^8.4CI passing Since May 17Pushed 1w ago5 watchersCompare [ Source](https://github.com/justbetter/statamic-glide-directive)[ Packagist](https://packagist.org/packages/justbetter/statamic-glide-directive)[ RSS](/packages/justbetter-statamic-glide-directive/feed)WikiDiscussions master Synced yesterday READMEChangelog (10)Dependencies (21)Versions (48)Used By (1) [ ![Banner](./art/banner.png)](https://github.com/justbetter/statamic-glide-directive "JustBetter")Statamic Glide Directive ======================== [](#statamic-glide-directive) - 🚀 Automatic responsive images - Optimizes images for all devices automatically. - ⚡ Performance boost - Serves correctly sized images, reducing load times and bandwidth. - 🧩 Simple syntax - Clean `@responsive` directive replaces complex `` tags. - 🔄 WebP support - Automatically delivers modern image formats to compatible browsers. Installation ------------ [](#installation) ``` composer require justbetter/statamic-glide-directive ``` Usage ----- [](#usage) This package adds a Blade directive. You can use an asset in the directive, and it will render the image according to the presets defined in the config. Here's an example: ``` @responsive($image, [ 'alt' => 'This is an alt text.', 'class' => 'some classes here', 'loading' => 'lazy', 'max_width' => 320 ]) ``` When `max_width` (or `rendered_width`) is provided, srcset candidates are capped to that rendered width at 2x DPR. To allow images to change on resize, include this in your head: ``` @include('statamic-glide-directive::partials.head') ``` ### Image Generation [](#image-generation) Images are served directly through custom routes that properly handle the content type and caching. When a preset image is requested, it's generated on demand and stored in the public directory. If an image preset hasn't been generated yet, a placeholder will be used temporarily until the optimized version is ready. We recommend pre-generating your presets for optimal performance: ``` php please assets:generate-presets ``` Config ------ [](#config) The package has default configurations. By default, it will use the presets defined in this addon's config. If you've defined your asset presets in the Statamic config, those will be used. Default config: ``` 'presets' => [ 'placeholder' => ['w' => 32, 'h' => 32, 'q' => 100, 'fit' => 'contain'], 'xs' => ['w' => 320, 'h' => 320, 'q' => 70, 'fit' => 'contain', 'lossless' => false], 'sm' => ['w' => 480, 'h' => 480, 'q' => 75, 'fit' => 'contain', 'lossless' => false], 'md' => ['w' => 768, 'h' => 768, 'q' => 80, 'fit' => 'contain', 'lossless' => false], 'lg' => ['w' => 1280, 'h' => 1280, 'q' => 82, 'fit' => 'contain', 'lossless' => false], 'xl' => ['w' => 1440, 'h' => 1440, 'q' => 82, 'fit' => 'contain', 'lossless' => false], '2xl' => ['w' => 1680, 'h' => 1680, 'q' => 82, 'fit' => 'contain', 'lossless' => false], ], ``` ### Image Resize Threshold [](#image-resize-threshold) This setting defines the threshold width for image source sets. Images wider than this threshold will be processed differently to optimize performance. ``` 'image_resize_threshold' => 480 ``` ### Placeholder [](#placeholder) On page load, a small variant of the image will be loaded. To disable this, set the placeholder in the config file: ``` 'placeholder' => true, ``` ### Sources [](#sources) Configure which sources to use. By default, only WebP sources are used. You can also configure sources based on the image MIME type or use both. ``` 'sources' => 'webp', ``` ### Publish Configuration [](#publish-configuration) ``` php artisan vendor:publish --provider="JustBetter\ImageOptimize\ServiceProvider" ``` ### Health Score 58 — FairBetter than 98% of packages Maintenance99 Actively maintained with recent releases Popularity30 Limited adoption so far Community21 Small or concentrated contributor base Maturity71 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~23 days Recently: every ~11 days Total 34 Last Release 2d ago Major Versions 1.2.0 → 2.0.02024-08-08 2.x-dev → 3.0.02025-07-29 3.2.0 → 4.0.02026-02-26 3.3.0 → 4.1.02026-05-19 PHP version history (6 changes)1.0.0PHP ^8.0|^8.1 1.2.0PHP ^8.2|^8.3 2.3.0PHP ^8.1|^8.2|^8.3 2.6.4PHP ^8.1 3.1.0PHP ^8.3 4.0.0PHP ^8.4 ### Community Maintainers ![](https://www.gravatar.com/avatar/2d00b3f55cd4ae8b8cfb001a644ed6c7a1127a956c24375bcfe16ce12bd89bed?d=identicon)[justbetter](/maintainers/justbetter) --- Top Contributors [![BobWez98](https://avatars.githubusercontent.com/u/23509926?v=4)](https://github.com/BobWez98 "BobWez98 (60 commits)")[![kevinmeijer97](https://avatars.githubusercontent.com/u/9716909?v=4)](https://github.com/kevinmeijer97 "kevinmeijer97 (52 commits)")[![indykoning](https://avatars.githubusercontent.com/u/15870933?v=4)](https://github.com/indykoning "indykoning (8 commits)")[![royduin](https://avatars.githubusercontent.com/u/1703233?v=4)](https://github.com/royduin "royduin (8 commits)")[![Jade-GG](https://avatars.githubusercontent.com/u/32514269?v=4)](https://github.com/Jade-GG "Jade-GG (4 commits)") ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/justbetter-statamic-glide-directive/health.svg) ``` [![Health](https://phpackages.com/badges/justbetter-statamic-glide-directive/health.svg)](https://phpackages.com/packages/justbetter-statamic-glide-directive) ``` ### Alternatives [statamic-rad-pack/runway Eloquently manage your database models in Statamic. 135224.7k7](/packages/statamic-rad-pack-runway)[statamic/seo-pro 68516.6k](/packages/statamic-seo-pro)[statamic/statamic Statamic 829179.5k](/packages/statamic-statamic)[statamic/eloquent-driver Allows you to store Statamic data in a database. 126741.1k17](/packages/statamic-eloquent-driver)[duncanmcclean/statamic-cargo Comprehensive e-commerce addon for Statamic. Build bespoke e-commerce sites without the complexity. 3416.7k](/packages/duncanmcclean-statamic-cargo)[stillat/antlers-components 2763.2k1](/packages/stillat-antlers-components) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)