53

Product support

Visit this product's website for support.

Categories

Resize and transform images on the fly in Twig and October CMS, using the incomparable Intervention Image library along with the GD or ImageMagick extensions.

Features

  • Flexible resizing options with several modes of operation, including cropping, contain, cover and stretch sizing.
  • Powerful manipulation options to apply several effects to your images: greyscale, blurring, sharpening, rotating and many more.
  • Images are stored in cache after generation to reduce server load.
  • All features are available through two Twig filters, resize (resizing and effects) and modify (effects only).

Requirements

  • PHP 7.0 or above
  • PHP fileinfo extension
  • PHP gd extension or imagick extension

More information

Example of Usage

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 &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 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 -->
Modifier Name Code Rules Examples Details
Format format in:jpg,png,webp,bmp,gif,ico,auto jpg, png, auto, ... Change the format of the image.
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/grayscale accepted true, 1 See accepted rule. Sets the image mode to greyscale. Both codes are accepted (one just maps to the other)
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 fill/background Hex color #fff, #123456, 000 Set a background color - Hex color (with or without hashtag). Both codes are accepted (one just maps to the other)
Colorize colourise/colorize string (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:

<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 }) }}">
  • Found the plugin useful on 30 Apr, 2020

    Awesome plugin

  • Found the plugin useful on 28 Nov, 2019

    Great module. I would recommend this one, that is supported by a core octobercms maintainer, over the other (but far more popular actually) image resizer module that is not actively maintained.

    This module should be promoted as the 2019 image resizer module of choice.

  • 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.

2.2.3

Improvements to Permalinks

Nov 18, 2020

2.2.2

Fix MySQL issue where text fields had default values

Oct 22, 2020

2.2.1

Fix issue where REMOTE_ADDR server variable is not set when running through CLI

Oct 21, 2020

2.2.0

Added optional permalinks for images to ensure image URLs always yield the same image after cache flushes

Oct 21, 2020

2.1.9

Improvement to the detection of the original image's mime type (uses less system resources)

Sep 07, 2020

2.1.8

Added twig filter to parse and resize/modify images (via regex) using twig filter(s)

Aug 19, 2020

2.1.7

Fix - Update plugin's boot method to not directly reference Settings until DB connection is established

May 27, 2020

2.1.6

Fix migration (2.1.2 migration) that causes installations to fail (due to plugin settings not existing for new projects at time of execution)

May 26, 2020

2.1.5

Add new setting that runs `imageresize:clear` when `cache:clear` is run (if configured), and fix a Settings bug that was introduced from v2.1.0

May 19, 2020

2.1.4

Add new Dashboard Widget as an alternative method of clearing the image resize cache

May 19, 2020

2.1.3

Fix - Generate absolute URLs instead of domain-relative URLs

May 19, 2020

2.1.2

Clear old images (for the v2.1.0 directory change)

May 19, 2020

2.1.1

Fix double slash issue in resized image URLs

May 19, 2020

2.1.0

Move default imageresizecache directory (out of app/media) and store+serve images with file extension (change default imagresize cache clear to 1 week)

May 19, 2020

2.0.5

Add Fit Position setting

Apr 15, 2020

2.0.4

Fix bug where exception is thrown when you do not provide height/width and instead only provide a max height/width

Apr 06, 2020

2.0.3

Add alias 'crop' to 'cover' resize mode

Mar 04, 2020

2.0.2

Implement ability to add watermarks to images

Feb 28, 2020

2.0.1

Fix bug (since 2.0.0) where the 'default 404 image' does not utilise the configured background/mode/quality

Feb 14, 2020

2.0.0

Optimise image resizing on initial pageload by offloading to separate thread (by resizing when requesting images)

Feb 07, 2020

1.1.7

Remove debug routes file

Feb 07, 2020

1.1.6

Fix return type errors

Oct 01, 2019

1.1.5

Fix issue with spaces in filenames

Sep 26, 2019

1.1.4

Register access permissions

Sep 17, 2019

1.1.3

Fix PHP 7.0 incompatibility issue, support all relative URL images

Jun 19, 2019

1.1.2

Minor tweaks and improvements, ship plugin with 2 filters

Jun 19, 2019

1.1.1

Enable image caching

Jun 15, 2019

1.1.0

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

Jun 15, 2019

1.0.0

Initial version of Image Resize

Jun 13, 2019