135

Product support

Get help in the plugin support forum.

Categories

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

Usage

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

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