Product support

Get help in the plugin support forum.


What it does

It allows you to resize (and/or manipulate) images on the fly in Twig.

What it includes

  • Images can be resized by providing either a height, width, or both, with the option of specifying the mode (crop, contain, etc)
  • Images are stored in cache, of course, to reduce server requirements.
  • The manipulation side of this plugin allows you to adjust an image's brightness, contrast, blur it, sharpen it, rotate, colourise or even flip the image.
  • A filter for modifying pathToImage | modify({ modifier: value, ... })
  • A filter for resizing pathToImage | resize(width, height, { modifier: value, ... }) (with ability to modify as well)

How to Use

Fairly simply, really. See below for example, or see the documentation for more information. Twig:

{variable type="mediafinder" name="imagetest" mode="image" label="Image test"}{/variable}

<!-- Say you want the image at 1000px (width) by 500px (height), with a similar look to what a "background-size: contain" would do to a background image -->
<img src="{{ imagetest | media | resize(1000, 500, { mode: 'contain' }) }}">

<!-- Or say you want the image to be a little darker for a hero image background -->
<img src="{{ imagetest | media | modify({ brightness: -50 }) }}">

How to configure

The main configuration is the image driver which is not hooked into any configuration file just yet. If need be it can be overwritten, per image (as a modifier - driver: 'imagick').

About this plugin

This plugin is essentially an October (Twig) based wrapper for another free PHP library which itself acts as a beautiful wrapper for GD/Imagick, called Intervention Image. Thanks to them for making this possible.

Coming Soon

  • Settings
  • Better handling of invalid images (including a fallback 'image not found' image, customisable of course)
  • More (feel free to open PRs in GitHub)
Example of Usage

Full Documentation on GitHub


This plugin utilises Intervention Image's magical powers to easily resize and transform your images with ease, allow us to create a wrapper for it. Please note it does not do everything intervention/image does, however a fair few features are available.

Basic Resizing

Resizing requires at least one of the two dimension arguments, | resize(width, height)

Resize to W 1000px * H 700px:
<img src="{{ image | media | resize(1000, 700) }}">

Resize to W 1000px * H auto:
<img src="{{ image | media | resize(1000) }}">

Resize to W auto * H 700px:
<img src="{{ image | media | resize(null, 700) }}">

Resizing Modes

Resizing Modes are almost synonymous to CSS 3 background-size modes to make it easier to remember. Available options are: auto (default), cover, & contain, each doing the same as their CSS equivalent, with one additional mode: stretch which behaves how a basic &lt;img&gt; element would:

Default (image is displayed in its original size):
<img src="{{ image | media | resize(1000, 700, { mode: 'auto' }) }}">

Resize the background image to make sure the image is fully visible
<img src="{{ image | media | resize(1000, 700, { mode: 'contain' }) }}">

Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
<img src="{{ image | media | resize(1000, 700, { mode: 'cover' }) }}">

Stretch and morph it to fit exatly in the defined dimensions
<img src="{{ image | media | resize(1000, 700, { mode: 'stretch' }) }}">

Further Modifications

A few image adjustment tools have been implemented into this plugin, which utilise their intervention/image 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:

<img src="{{ image | media | resize(1000, 700, { modifier: value }) }}">
<img src="{{ image | media | modify({ modifier: value }) }}"> <!-- Same size, just modified -->
Modifier Name Code Rules Examples Details
Blur blur min:0 max:100 0, 50, 100 Blurs the image
Sharpen sharpen min:0 max:100 0, 50, 100 Sharpens the image
Brightness brightness min:-100 max:100 -100, 50, 100 Brightens (or darkens) the image
Contrast contrast min:-100 max:100 -100, 50, 100 Increases/decreases the contrast of the image
Pixelate pixelate min:1 max:1000 1, 500, 1000 Pixelates the image
Greyscale greyscale accepted true, 1 See accepted rule. Sets the image mode to greyscale
Invert invert accepted true, 1 See accepted rule. Inverts all image colors
Opacity opacity min:0 max:100 0, 50, 100 Set the opacity of the image
Rotate rotate min:0 max:360 45, 90, 360 Rotate the image (width / height does not constrain the rotated image, the image is resized prior to modifications)
Flip flip 'h' or 'v' h, v Flip horizontally (h) or vertically (v)
Background background Hex color #fff, #123456, 000 Set a background color - Hex color (with or without hashtag)
Colorize colorize string (format: r,g,b) 255,0,0, 0,50,25 Colorize the image. String containing 3 numbers (0-255), comma separated

A couple examples from the above:

<img src="{{ image | media | resize(1000, 700, { brightness: 50 }) }}">
<img src="{{ image | media | resize(1000, 700, { invert: true }) }}">
<img src="{{ image | media | resize(1000, 700, { rotate: 45 }) }}">
<img src="{{ image | media | resize(1000, 700, { background: '#fff' }) }}">
<img src="{{ image | media | resize(1000, 700, { colorize: '65,35,5' }) }}">

Bugs and New Features

Please feel free to open PRs and/or issues relating to any bugs or features so that everyone can benefit from them.

Special thanks to

  • Found the plugin useful on 23 Oct, 2019

    Great plugin! I think it's the only one in market that can resize image with "contain" mode. Thank you AB Web Developers!

    But to get it working with Cyrillic file names I had to replace str_replace() function with urldecode() in file abwebdevelopers/imageresize/classes/Resizer.php in lines 85 and 92.


Fix return type errors

Oct 01, 2019


Fix issue with spaces in filenames

Sep 26, 2019


Register access permissions

Sep 17, 2019


Fix PHP 7.0 incompatibility issue, support all relative URL images

Jun 19, 2019


Minor tweaks and improvements, ship plugin with 2 filters

Jun 19, 2019


Enable image caching

Jun 15, 2019


Add settings, filters, image not found placeholder, and various other improvements

Jun 15, 2019


Initial version of Image Resize

Jun 13, 2019