PHPackages abwebdevelopers/oc-imageresize-plugin - 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. [Image & Media](/categories/media) 4. / 5. abwebdevelopers/oc-imageresize-plugin ActiveOctober-plugin[Image & Media](/categories/media) abwebdevelopers/oc-imageresize-plugin ===================================== Image resizing made easy for October CMS 2.3.0(4y ago)141.3k6[11 issues](https://github.com/ABWebDevelopers/oc-imageresize-plugin/issues)[1 PRs](https://github.com/ABWebDevelopers/oc-imageresize-plugin/pulls)MITPHPPHP >=7.0 Since Jun 13Pushed 4y ago2 watchersCompare [ Source](https://github.com/ABWebDevelopers/oc-imageresize-plugin)[ Packagist](https://packagist.org/packages/abwebdevelopers/oc-imageresize-plugin)[ RSS](/packages/abwebdevelopers-oc-imageresize-plugin/feed)WikiDiscussions master Synced 6d ago READMEChangelog (10)Dependencies (2)Versions (24)Used By (0) October CMS Image Resize Plugin =============================== [](#october-cms-image-resize-plugin) Resize and transform images on the fly in Twig and October CMS. Requirements ------------ [](#requirements) - October CMS - PHP 7.0 or above - PHP `fileinfo` extension - PHP `gd` extension **or** `imagick` extension Please note that GD is bound by PHP's memory limits, whereas Imagick isn't. If your site returns 503 when resizing images, try Imagick (can be changed via Settings). Getting started --------------- [](#getting-started) - [Installation](#installation) - [October CMS usage](#october-cms-usage) ### Installation [](#installation) You can install this plugin in a number of ways: #### Via Composer [](#via-composer) Run the following commands in your October CMS project folder to install the plugin. ``` composer require abwebdevelopers/oc-imageresize-plugin php artisan october:up ``` #### Via Updates & Plugins screen [](#via-updates--plugins-screen) In the October CMS backend, you can navigate to *Settings > Updates & Plugins* and then click the *Install Plugins* button to install a plugin to your October CMS install. Add `ABWebDevelopers.ImageResize` to the search box to be able to select this plugin and install it. #### Via command-line [](#via-command-line) Run the following command in your October CMS project folder to install the plugin. ``` php artisan plugin:install ABWebDevelopers.ImageResize ``` ### October CMS usage [](#october-cms-usage) This plugin utilises [Intervention Image](https://github.com/Intervention/image)'s magical powers to resize and transform your images with ease. Please note that this plugin does not cover every feature of the Intervention Image library. #### Basic Resizing [](#basic-resizing) **Twig Filter:** `| resize(int $width, int $height, array $options)` Basic resizing in Twig is done using the `| resize` filter. Resizing requires at least one of the two dimension arguments. ``` Resize to width 1000px and height 700px: Resize to width 1000px and automatically calculate height: Resize to height 700px and automatically calculate width: ``` A third argument is available, `options`, which allows you specify the resizing mode, along with any other image modifications which are detailed below. #### Resizing Modes [](#resizing-modes) Resizing modes are almost synonymous to CSS3 `background-size` modes to make it easier to remember. Available options are: `auto` (default), `cover` and `contain`, each doing the same as their CSS equivalent, with one additional mode: `stretch` which behaves how a basic `` element would: ``` Default (image is displayed in its original size): Resize the background image to make sure the image is fully visible Resize the background image to cover the entire container, even if it has to cut a little bit off one of the edges Stretch and morph it to fit exatly in the defined dimensions ``` When using `mode: cover` (alias `mode: crop`) you may specify the `fit_position` modifier to choose where the center of the resize should be focused. **Further Modifications** A few image adjustment tools and filters have been implemented into this plugin, which utilise their Intervention Image library counterparts. Usage of the modifiers is simple, either add them in a `key: value` fashion in the 3rd argument of the resize filter, or by using the modify filter, as such: ``` ``` Modifier NameCodeRulesExamplesDetailsFormatformatin:jpg,png,webp,bmp,gif,ico,auto`jpg`, `png`, `auto`, ...Change the format of the image.Blurblurmin:0 max:100`0`, `50`, `100`Blurs the imageSharpensharpenmin:0 max:100`0`, `50`, `100`Sharpens the imageBrightnessbrightnessmin:-100 max:100`-100`, `50`, `100`Brightens (or darkens) the imageContrastcontrastmin:-100 max:100`-100`, `50`, `100`Increases/decreases the contrast of the imagePixelatepixelatemin:1 max:1000`1`, `500`, `1000`Pixelates the imageGreyscalegreyscale/grayscaleaccepted`true`, `1`See [accepted](https://octobercms.com/docs/services/validation#rule-accepted) rule. Sets the image mode to greyscale. Both codes are accepted (one just maps to the other)Invertinvertaccepted`true`, `1`See [accepted](https://octobercms.com/docs/services/validation#rule-accepted) rule. Inverts all image colorsOpacityopacitymin:0 max:100`0`, `50`, `100`Set the opacity of the imageRotaterotatemin:0 max:360`45`, `90`, `360`Rotate the image (width / height does not constrain the rotated image, the image is resized prior to modifications)Flipflip'h' or 'v'`h`, `v`Flip horizontally (h) or vertically (v)Backgroundfill/backgroundHex color`#fff`, `#123456`, `000`Set a background color - Hex color (with or without hashtag). Both codes are accepted (one just maps to the other)Colorizecolourise/colorizestring (format: r,g,b)`255,0,0`, `0,50,25`Colorize the image. String containing 3 numbers (0-255), comma separated. Both codes are accepted (one just maps to the other)A couple examples from the above: ``` ``` **Please Note:** In order to encode images to WebP format, you will need to enable WebP support on your chosen driver (Imagick or GD). It's likely that by default you will not have WebP support, so using this format may result in errors or broken images. ### Filters (templates for configuration) [](#filters-templates-for-configuration) Filters in the Image Resize plugin, while following a similar concept to filters in Intervention Image, are handled differently in this plugin. Filters are specified in the *Settings > Image Resizer* page. By clicking the *Filters* tab at the top, you can specify a filter "code" which can apply a set of enhancements and modifications to an image. Once saved, you can then use the `filter` option in the `resize` and `modify` Twig filters to specify the filter to use. A common example would be a basic thumbnail - you want this to always be `format: jpg`, `mode: cover`, `quality: 60`, `max_width: 200`, `max_height: 200` and maybe `background: #fff`. With filters, you can specify the above, call it something useful like `thumbnail`, then simply do the following: ``` or ``` Which will use the predefined list of modifiers and have them overwritten by any that are supplied, for example: ``` ``` > There are a couple new modifiers for filters which include: `min_width`, `max_width`, `min_height`, `max_height` which all act as constraints for the dimensions of the images using filters. > > Should you use one, please note that if you use it with the `| resize(w, h)` function, your supplied dimensions will be ignored *if* they are out of bounds of the constraints. **Using the library in PHP** Should you want to implement your own use of this library outside of Twig, you can use it in a very similar manner: ``` $resizer = new \ABWebDevelopers\ImageResize\Classes\Resizer($image); $resizer->resize(800, 250, [ 'rotate' => 45 ]); // $resizer->render(); // only use this if you intend on aborting the script immediately at this point ``` Which is synonymous to: ``` ``` ### Bugs and New Features [](#bugs-and-new-features) We encourage you to open PRs and/or issues relating to any bugs or features so that everyone can benefit from them. ### Special thanks to [](#special-thanks-to) - [Intervention Image](https://github.com/Intervention/image) ### Health Score 30 — LowBetter than 64% of packages Maintenance4 Infrequent updates — may be unmaintained Popularity25 Limited adoption so far Community17 Small or concentrated contributor base Maturity64 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 ~40 days Recently: every ~94 days Total 21 Last Release 1720d ago Major Versions 1.0.x-dev → 2.02020-02-04 ### Community Maintainers ![](https://www.gravatar.com/avatar/f8628eaab5c2f87b2ce79bcb55c7fe2d1377bdd4cf59f4ad2f12a74ec0be4ec8?d=identicon)[abwebdevelopers](/maintainers/abwebdevelopers) --- Top Contributors [![owenvoke](https://avatars.githubusercontent.com/u/1899334?v=4)](https://github.com/owenvoke "owenvoke (6 commits)")[![bradietilley](https://avatars.githubusercontent.com/u/44430471?v=4)](https://github.com/bradietilley "bradietilley (2 commits)")[![PubliAlex](https://avatars.githubusercontent.com/u/55833027?v=4)](https://github.com/PubliAlex "PubliAlex (2 commits)")[![LukeTowers](https://avatars.githubusercontent.com/u/7253840?v=4)](https://github.com/LukeTowers "LukeTowers (1 commits)")[![sheck87](https://avatars.githubusercontent.com/u/5990151?v=4)](https://github.com/sheck87 "sheck87 (1 commits)")[![ShrikeFIN](https://avatars.githubusercontent.com/u/1734521?v=4)](https://github.com/ShrikeFIN "ShrikeFIN (1 commits)") --- Tags image-resizeroctober-cmsoctobercms-pluginpluginpluginimageresizecmsoctoberresizing ### Embed Badge ![Health badge](/badges/abwebdevelopers-oc-imageresize-plugin/health.svg) ``` [![Health](https://phpackages.com/badges/abwebdevelopers-oc-imageresize-plugin/health.svg)](https://phpackages.com/packages/abwebdevelopers-oc-imageresize-plugin) ``` ### Alternatives [intervention/image-laravel Laravel Integration of Intervention Image 1496.5M102](/packages/intervention-image-laravel)[bkwld/croppa Image thumbnail creation through specially formatted URLs for Laravel 510496.0k23](/packages/bkwld-croppa)[october/rain October Rain Library 1601.7M63](/packages/october-rain)[toinekamps/responsive-pics Responsive Pics is a Wordpress tool for resizing images on the fly. 831.2k](/packages/toinekamps-responsive-pics)[intervention/image-symfony Symfony Integration of Intervention Image 1066.8k](/packages/intervention-image-symfony)[ayvazyan10/nova-imagic Imagic is a Laravel Nova field package that allows for image manipulation capabilities, such as cropping, resizing, quality adjustment, and WebP conversion. It utilizes the powerful Intervention Image class for image manipulation. 144.3k1](/packages/ayvazyan10-nova-imagic) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)