Please review the full documentation and code on GitHub if you require further assistance.

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:
<img src="{{ image | media | resize(1000, 700) }}">

Resize to width 1000px and automatically calculate height:
<img src="{{ image | media | resize(1000) }}">

Resize to height 700px and automatically calculate width:
<img src="{{ image | media | resize(null, 700) }}">

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 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 <img> 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 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:

<img src="{{ image | media | resize(1000, 700, { modifier: value }) }}">
<img src="{{ image | media | modify({ modifier: value }) }}"> <!-- Same size, just modified -->

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' }) }}">

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:

<!-- display thumbnail -->
<img src="{{ image | media | modify({ filter: 'thumbnail' }) }}">
or
<!-- display thumbnail, but 150x150 -->
<img src="{{ image | media | resize(150, 150, { filter: 'thumbnail' }) }}">

Which will use the predefined list of modifiers and have them overwritten by any that are supplied, for example:

<img src="{{ image | media | modify({ filter: 'thumbnail', brightness: -30, contrast: 30 }) }}">

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:

<img src="{{ image | resize(800, 250, { rotate: 45 }) }}">