PHPackages webkinder/sproutset - 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. webkinder/sproutset ActiveLibrary[Templating & Views](/categories/templating) webkinder/sproutset =================== A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects. v0.1.0-beta.10(2mo ago)29915↓44.4%[1 issues](https://github.com/webkinder/sproutset/issues)GPL-3.0-or-laterPHPPHP ^8.2CI passing Since May 9Pushed 1mo agoCompare [ Source](https://github.com/webkinder/sproutset)[ Packagist](https://packagist.org/packages/webkinder/sproutset)[ Docs](https://github.com/webkinder/sproutset)[ RSS](/packages/webkinder-sproutset/feed)WikiDiscussions develop Synced 1mo ago READMEChangelog (10)Dependencies (16)Versions (19)Used By (0) Sproutset ========= [](#sproutset) Modern responsive image management for projects using the Roots Acorn framework. Features -------- [](#features) - Automatic `srcset` and `sizes` generation - AVIF conversion for JPEG/PNG images - Image optimization via Spatie Image Optimizer - Custom image sizes with responsive variants - Blade component with clean syntax - On-the-fly size generation - CLI batch optimization Requirements ------------ [](#requirements) - PHP ^8.2 - Roots Acorn ^5.0 - WordPress ^5.9 || ^6.0 Installation ------------ [](#installation) ``` composer require webkinder/sproutset wp acorn vendor:publish --tag=sproutset-config ``` The package auto-registers via Acorn. Configure image sizes in `config/sproutset-config.php`. Configuration ------------- [](#configuration) Edit `config/sproutset-config.php`: ``` return [ 'convert_to_avif' => true, 'auto_optimize_images' => true, 'image_size_sync' => [ 'strategy' => 'admin_request', 'cron_interval' => 'daily', ], 'image_sizes' => [ 'thumbnail' => [ 'width' => 150, 'height' => 150, 'crop' => true, ], 'medium' => [ 'width' => 400, 'height' => 400, 'crop' => false, ], 'medium_large' => [ 'width' => 768, 'height' => 0, 'crop' => false, 'srcset' => [ 0.5, 2, ], ], 'large' => [ 'width' => 1024, 'height' => 1024, 'crop' => false, 'srcset' => [ 0.5, 2, ], 'show_in_ui' => true, ], ], ]; ``` ### Global Options [](#global-options) - **`convert_to_avif`**: Enable automatic AVIF conversion for JPEG/PNG images - **`auto_optimize_images`**: Optimize images on upload (requires optimization binaries) - **`image_size_sync.strategy`**: Controls when WordPress image size options are synchronized with the Sproutset config. Supported values: `request`, `admin_request` (default), `cron`, `manual`. - **`image_size_sync.cron_interval`**: WP-Cron schedule key used when the strategy is `cron` (for example `daily`, `hourly`, or a custom schedule registered by your project). - **`focal_point_cropping`**: Controls if and how focal-point-based recropping runs. Accepts `false`/`null` (disabled), `true` (immediate), or an array with `strategy` (`immediate` or `cron`) and optional `delay_seconds`. - **`max_on_demand_generations_per_request`**: Limits how many missing sizes may be generated (and focal-cropped) on-the-fly during a single web request. Use `0` to disable the limit. ### Image Size Options [](#image-size-options) - **`width`**: Width in pixels (0 for proportional) - **`height`**: Height in pixels (0 for proportional) - **`crop`**: Hard crop (`true`) or proportional resize (`false`) - **`srcset`**: Array of multipliers for responsive variants, e.g., `[0.5, 2]` - **`show_in_ui`**: Show in media library (`true` or custom label string) - **`post_types`**: Limit generation on upload to specific post types, e.g., `['post', 'page']`. Note: Missing sizes are still generated on-the-fly when requested. **Required sizes:** `thumbnail`, `medium`, `medium_large`, `large` **Example:** ``` 'hero' => [ 'width' => 1920, 'height' => 1080, 'crop' => true, 'srcset' => [0.5, 2], 'show_in_ui' => 'Hero Image', 'post_types' => ['post', 'page'], ], ``` ### Image Size Synchronization [](#image-size-synchronization) Sproutset keeps WordPress' core image size options (for example `thumbnail_size_w`, `medium_size_w`, etc.) in sync with the `image_sizes` configuration. This ensures that functions like `wp_get_attachment_image_src()` and other plugins that read these options always see the correct dimensions. Synchronization is guarded by a configuration hash so it only runs when the underlying configuration actually changes. When needed, you can influence when this synchronization happens via the `image_size_sync.strategy` option, the `SPROUTSET_IMAGE_SIZE_SYNC_STRATEGY` env/constant, or the `sproutset_image_size_sync_strategy` filter. In environments where you prefer not to run synchronization logic during web requests, you can switch the strategy to `cron` or `manual` and trigger updates explicitly using the CLI command: ``` wp acorn sproutset:sync-image-sizes # Sync core image size options with Sproutset config wp acorn sproutset:sync-image-sizes --force # Force sync even if no config change is detected ``` Usage ----- [](#usage) Basic usage: ``` ``` ### Parameters [](#parameters) The component accepts loose types for all parameters (strings, integers, booleans, null) and normalizes them internally. You can pass values as strings from HTML attributes or as typed values from PHP/Blade. **Required:** - **`attachment-id`**: WordPress attachment ID (accepts `int`, `string`, or numeric values) **Optional:** - **`size-name`**: Image size name (default: `'large'`) - **`sizes`**: Custom `sizes` attribute (default: auto-generated) - **`alt`**: Alt text (default: from WordPress metadata) - **`width`** / **`height`**: Custom dimensions (default: auto-detected, accepts numeric strings) - **`class`**: CSS classes (merged with any classes passed via attribute bag) - **`loading`**: Loading strategy (default: `'lazy'`). Allowed values: `'lazy'`, `'eager'`. - **`decoding`**: Decoding strategy (default: `'async'`). Allowed values: `'async'`, `'sync'`, `'auto'`. - **`use-auto-sizes`**: Add `auto,` prefix to the `sizes` attribute (default: `true`) - **`focal-point`**: Enable focal point styling/cropping for this image (default: `false`) - **`focal-point-x`** / **`focal-point-y`**: Override focal point coordinates (0–100, in percent) when `focal-point` is enabled; defaults are read from the attachment metadata. **Arbitrary HTML Attributes:** Any additional attributes (like `id`, `data-*`, `aria-*`, `title`, etc.) are automatically passed through Laravel's attribute bag and merged into the rendered `` tag. ### Examples [](#examples) ``` {{-- Basic usage with string ID --}} {{-- With PHP variable (integer) --}} {{-- Custom alt and class --}} {{-- Multiple classes (component class + user class) --}} {{-- Custom sizes attribute --}} {{-- Disable lazy loading (above-the-fold images) --}} {{-- Disable auto prefix for sizes --}} {{-- Use media library focal point --}} {{-- With arbitrary HTML attributes (id, data-*, aria-*, etc.) --}} ``` ### Focal Point Cropping [](#focal-point-cropping) Sproutset lets you define a focal point per image in the WordPress media library and uses it when cropping hard-cropped sizes. - **Configuration:** Enable via `focal_point_cropping` (boolean or array with `strategy` = `immediate` or `cron` and optional `delay_seconds`). - **Media UI:** Set the focal point using the drag handle in the media modal. The coordinates are stored on the attachment. - **Component usage:** Pass `focal-point="true"` (and optionally `focal-point-x` / `focal-point-y`) to apply the focal point via `object-position`. - **CLI:** Run `wp acorn sproutset:reapply-focal-crop [--optimize]` to reapply focal crops for existing attachments. The `--optimize` flag will also optimize the images. - **On-demand generation:** On-the-fly generation of missing sizes respects `max_on_demand_generations_per_request` to avoid heavy single requests. ### Automatic Behavior [](#automatic-behavior) - Auto-generated `sizes` attribute based on actual image width - Smart `srcset` variants from your config (e.g., `@0.5x`, `@2x`) - `object-fit: cover` applied when images are smaller than configured dimensions - On-the-fly generation of missing sizes Optimization ------------ [](#optimization) Sproutset integrates with [Spatie Image Optimizer](https://github.com/spatie/image-optimizer) for image optimization. ### Install Optimization Binaries [](#install-optimization-binaries) **Supported formats:** JPEG (jpegoptim), PNG (optipng/pngquant), WebP (cwebp), AVIF (avifenc), SVG (svgo), GIF (gifsicle) See [Spatie Image Optimizer](https://github.com/spatie/image-optimizer?tab=readme-ov-file#optimization-tools) for installation instructions. ### Automatic Optimization [](#automatic-optimization) When `auto_optimize_images` is enabled: - Images are optimized on upload - Generated sizes are optimized on-the-fly - Runs in background via WordPress cron - Already optimized images are skipped ### CLI Batch Optimization [](#cli-batch-optimization) ``` wp acorn sproutset:optimize # Optimize unoptimized images wp acorn sproutset:optimize --force # Re-optimize all images ``` The command shows a progress bar and lists available/missing binaries. Contributing ------------ [](#contributing) Contributions are welcome! See [Contributing Guide](CONTRIBUTING.md) for details on reporting bugs, development workflow, and pull request process. License ------- [](#license) Licensed under [GPL-3.0](LICENSE.md). Free to use, modify, and distribute under GPL-3.0 terms. ### Health Score 45 — FairBetter than 93% of packages Maintenance89 Actively maintained with recent releases Popularity28 Limited adoption so far Community9 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor1 Top contributor holds 56.9% of commits — single point of failure 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 ~25 days Recently: every ~6 days Total 13 Last Release 69d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/597462d46107dd3eedd2b10f3add8a737c67c8148836713dd97585128d19d477?d=identicon)[webkinder](/maintainers/webkinder) --- Top Contributors [![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4)](https://github.com/renovate[bot] "renovate[bot] (141 commits)")[![marcoluzi](https://avatars.githubusercontent.com/u/40238681?v=4)](https://github.com/marcoluzi "marcoluzi (106 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags acornbladecomposerlaravelresponsive-imagewordpress-laravelwordpress-pluginbladebedrockResponsive Imagessage ### Code Quality Static AnalysisRector Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/webkinder-sproutset/health.svg) ``` [![Health](https://phpackages.com/badges/webkinder-sproutset/health.svg)](https://phpackages.com/packages/webkinder-sproutset) ``` ### Alternatives [blade-ui-kit/blade-icons A package to easily make use of icons in your Laravel Blade views. 2.5k34.2M309](/packages/blade-ui-kit-blade-icons)[blade-ui-kit/blade-heroicons A package to easily make use of Heroicons in your Laravel Blade views. 64227.9M111](/packages/blade-ui-kit-blade-heroicons)[log1x/sage-directives A set of Blade directives for use with Roots Sage. 297709.3k5](/packages/log1x-sage-directives)[log1x/blade-svg-sage Composer package to add support for Blade SVG by Adam Wathan to Roots Sage. 7577.3k](/packages/log1x-blade-svg-sage)[hexbit/sage-woocommerce Woocommerce support for sage 10 257.0k](/packages/hexbit-sage-woocommerce)[roots/wp-blade-check Simple Composer package that checks and displays an admin notice if your uncompiled Blade templates are publicly accessible. 161.1k](/packages/roots-wp-blade-check) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)