Weave Code
Statamic Responsive Images Laravel Package
spatie/statamic-responsive-images
Statamic addon by Spatie that adds a responsive image fieldtype with art direction and breakpoint support. Automatically generates responsive variants on asset upload and renders them in Antlers via the responsive tag, with configurable breakpoints and options.
Responsive images for Statamic 3
Frequently asked questions about Statamic Responsive Images
- How do I install spatie/statamic-responsive-images in a Laravel/Statamic project?
- Run `composer require spatie/statamic-responsive-images` in your project root. The package integrates automatically with Statamic 4+ and requires no additional configuration beyond enabling the fieldtype in your blueprints. Ensure PHP 8.1+ and Statamic 4.0+ are installed first.
- Can I use this package with Statamic 3?
- Yes, but with limitations. The package officially supports Statamic 4+, though some features (like live preview) require v6.1+. For Statamic 3, use the legacy branch or expect potential compatibility gaps. Test thoroughly if upgrading later.
- What breakpoints does the package use by default, and how can I customize them?
- The package defaults to Tailwind CSS breakpoints (sm, md, lg, xl, 2xl). Customize them in your fieldtype YAML under `breakpoints` or globally in the config file. Each breakpoint can also have unique parameters like ratio, fit, or Glide overrides.
- Does this package support art direction (e.g., different images per breakpoint)?
- Yes. The `responsive` fieldtype allows per-breakpoint image selection, enabling art direction. Configure it in your blueprint YAML with `use_breakpoints: true` and define custom assets for each breakpoint in the fieldtype UI.
- How does lazy generation work, and should I disable Statamic’s image cache?
- The package generates responsive images on-demand when requested, reducing storage overhead. Set `statamic.assets.image_manipulation.cache = false` in your `.env` to enable lazy generation. This is recommended for most projects but may increase first-load latency.
- Will this package work with my existing Glide presets or override them?
- The package uses its own Glide presets for responsive variants, which may conflict with custom presets. To override defaults, use the `glide` parameter in your fieldtype config or publish the package’s views and modify them.
- Can I use responsive images in GraphQL queries for headless Statamic?
- Yes. The package exposes responsive image data via GraphQL, allowing you to fetch optimized variants for headless setups. Query the `responsive` fieldtype directly in your GraphQL schema or use the `responsive` Antlers tag in templates.
- How do I handle large-scale image processing without queue bottlenecks?
- Use Statamic’s queue system for background processing. For high-volume sites, configure a dedicated queue (`spatie-responsive-images`) or batch processing. Monitor queue performance and consider horizontal scaling if needed.
- What happens if I switch from cached to lazy generation mid-project?
- Existing cached images will remain valid until accessed. To force regeneration, run `php please regenerate:responsive-images`. Note that lazy generation may cause temporary performance dips until variants are generated on first request.
- Are there alternatives to this package for Statamic responsive images?
- For Statamic, alternatives include manual Glide presets with `srcset` tags or third-party packages like `statamic/glide`. However, this package offers a declarative fieldtype and Antlers integration, reducing manual setup. For Laravel-only projects, consider `spatie/laravel-medialibrary`.
Weaver
How can I help you explore Laravel packages today?