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.0.0(2mo ago)38.7k↓65.1%2[1 PRs](https://github.com/justbetter/statamic-glide-directive/pulls)1PHPPHP ^8.4CI passing Since May 17Pushed 2mo 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 1mo ago READMEChangelog (10)Dependencies (7)Versions (37)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 54 — FairBetter than 97% of packages Maintenance86 Actively maintained with recent releases Popularity30 Limited adoption so far Community18 Small or concentrated contributor base Maturity70 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 ~31 days Total 29 Last Release 82d ago Major Versions 1.2.0 → 2.0.02024-08-08 2.x-dev → 3.0.02025-07-29 3.x-dev → 4.0.02026-02-26 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 [![kevinmeijer97](https://avatars.githubusercontent.com/u/9716909?v=4)](https://github.com/kevinmeijer97 "kevinmeijer97 (52 commits)")[![BobWez98](https://avatars.githubusercontent.com/u/23509926?v=4)](https://github.com/BobWez98 "BobWez98 (44 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 [roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[mopa/bootstrap-bundle Easy integration of twitters bootstrap into symfony2 7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3871.2M](/packages/limenius-react-bundle)[symfony/ux-icons Renders local and remote SVG icons in your Twig templates. 555.8M69](/packages/symfony-ux-icons)[statamic-rad-pack/runway Eloquently manage your database models in Statamic. 135192.6k5](/packages/statamic-rad-pack-runway)[nystudio107/craft-twigpack Twigpack is a bridge between Twig and webpack, with manifest.json & webpack-dev-server HMR support 97341.4k17](/packages/nystudio107-craft-twigpack) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)