PHPackages giantpeach/wp-modern-images - 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. [Utility & Helpers](/categories/utility) 4. / 5. giantpeach/wp-modern-images ActiveWordpress-plugin[Utility & Helpers](/categories/utility) giantpeach/wp-modern-images =========================== Improved developer experience for working with WordPress media library images 098PHP Since Nov 27Pushed 7mo agoCompare [ Source](https://github.com/Giant-Peach-Design/wp-modern-images)[ Packagist](https://packagist.org/packages/giantpeach/wp-modern-images)[ RSS](/packages/giantpeach-wp-modern-images/feed)WikiDiscussions main Synced today READMEChangelogDependenciesVersions (1)Used By (0) WP Modern Images ================ [](#wp-modern-images) A WordPress plugin for generating responsive `` elements with WebP support, retina handling, and art direction capabilities. Installation ------------ [](#installation) ``` composer require giantpeach/wp-modern-images ``` After installation, activate the plugin and flush permalinks (Settings → Permalinks → Save). Usage ----- [](#usage) ``` echo gp_image(123, [ 0 => [ 'w' => 400, 'h' => 300, ], 768 => [ 'w' => 800, 'h' => 600, ], 1024 => [ 'w' => 1200, 'h' => 800, ], ]); ``` ### Parameters [](#parameters) **`gp_image(int $image_id, array $sizes, array $options = []): string`** ParameterTypeDescription`$image_id`intWordPress attachment ID`$sizes`arrayBreakpoint-keyed array of size configurations`$options`arrayOptional rendering options### Size Configuration [](#size-configuration) Array keys define the min-width breakpoint in pixels (0 = default/mobile): ``` $sizes = [ 0 => [ // Default (mobile) 'w' => 400, // Width (required) 'h' => 300, // Height (required) 'fit' => 'cover', // Fit mode (default: 'cover') 'q' => 80, // Quality 1-100 (default: 80) ], 768 => [ // min-width: 768px 'w' => 800, 'h' => 600, ], 1024 => [ // min-width: 1024px 'w' => 1200, 'h' => 800, 'image_id' => 456, // Art direction: use different image ], ]; ``` ### Fit Modes [](#fit-modes) ValueDescription`cover`Fill dimensions, crop excess (like CSS `object-fit: cover`)`contain`Fit within dimensions, maintain aspect ratio`fill`Stretch to exact dimensions### Options [](#options) ``` $options = [ 'retina' => true, // Generate 2x versions (default: true) 'picture_class' => '', // Class for element 'img_class' => '', // Class for element 'alt' => '', // Alt text (defaults to WP attachment alt) 'loading' => 'lazy', // 'lazy' or 'eager' ]; ``` ### Full Example [](#full-example) ``` echo gp_image(123, [ 0 => [ 'w' => 400, 'h' => 300, 'fit' => 'cover', 'q' => 85, ], 768 => [ 'w' => 800, 'h' => 600, 'fit' => 'cover', ], 1024 => [ 'w' => 1200, 'h' => 800, 'fit' => 'contain', 'q' => 90, 'image_id' => 456, ], ], [ 'picture_class' => 'hero', 'img_class' => 'hero__img', 'loading' => 'eager', ]); ``` ### Output [](#output) ``` ``` Blade Directive (Sage/Acorn) ---------------------------- [](#blade-directive-sageacorn) If you're using Sage with Acorn, add this to your `app/Providers/ThemeServiceProvider.php` in the `boot()` method: ``` \Illuminate\Support\Facades\Blade::directive('gpImage', function ($expression) { return ""; }); ``` Then use in your Blade templates: ``` @gpImage(123, [ 0 => ['w' => 400, 'h' => 300], 768 => ['w' => 800, 'h' => 600], 1024 => ['w' => 1200, 'h' => 800], ]) {{-- With options --}} @gpImage($image_id, $sizes, ['picture_class' => 'hero', 'img_class' => 'hero__img']) ``` Configuration ------------- [](#configuration) ### Cache Directory [](#cache-directory) By default, processed images are cached in `wp-content/cache/wp-modern-images/`. **Via constant:** ``` define('WP_MODERN_IMAGES_CACHE_DIR', '/path/to/cache'); define('WP_MODERN_IMAGES_CACHE_URL', 'https://example.com/cache'); ``` **Via filter:** ``` add_filter('gp_modern_images_cache_path', function($path) { return '/custom/cache/path'; }); ``` Filters ------- [](#filters) FilterDescription`gp_modern_images_cache_path`Modify cache directory path`gp_modern_images_cache_url`Modify cache directory URL`gp_modern_images_default_options`Modify default options`gp_modern_images_picture_html`Modify final HTML outputRequirements ------------ [](#requirements) - PHP 7.4+ - WordPress 5.0+ - GD or Imagick extension License ------- [](#license) MIT ### Health Score 20 — LowBetter than 13% of packages Maintenance45 Moderate activity, may be stable Popularity12 Limited adoption so far Community6 Small or concentrated contributor base Maturity13 Early-stage or recently created project Bus Factor1 Top contributor holds 100% 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/e66b81ebd507f82992c477ab3e567933436d0a810a0886e6005b2e8b0fdf317a?d=identicon)[Giant Peach](/maintainers/Giant%20Peach) --- Top Contributors [![tom-gurney](https://avatars.githubusercontent.com/u/6736496?v=4)](https://github.com/tom-gurney "tom-gurney (10 commits)") ### Embed Badge ![Health badge](/badges/giantpeach-wp-modern-images/health.svg) ``` [![Health](https://phpackages.com/badges/giantpeach-wp-modern-images/health.svg)](https://phpackages.com/packages/giantpeach-wp-modern-images) ``` ### Alternatives [altis/core Core module for Altis 19228.0k3](/packages/altis-core) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)