# Effects

Imager X comes with 28 built-in effects that can be applied using the effects and preEffects transform parameters. Most of them require Imagick, but a few can also be used with GD.

And if you didn't find any that did exactly what you wanted, you can even extend Imager with your own custom effects.

TIP

You can play around with effects and get familiar with the syntax and parameters in the Effects Playground (opens new window).

# GD and Imagick

The following basic adjustments works both in GD and Imagick, and are limited to what is available in Imagine (opens new window):

# blur [int|float|bool]

Blurs the image. If you're using GD as image driver, blur can only be toggled on/off, either with true/false or 1/0.

# brightness [int]

Changes the brightness of the image. Use negative values to darken, and positive values to brighten.

# colorize [string]

Colorizes the image. Expects a hexadecimal color value.

# gamma [int|float]

Adjusts the image gamma.

# grayscale [bool]

Converts the image to grayscale if set to true.

# negative [bool]

Converts the image to negative if set to true.

# sharpen [bool]

Sharpens the image to grayscale if set to true.

# Imagick only

The following advanced image adjustments are only available when using Imagick:

# adaptiveBlur [array]

Applies an adaptive blur effect (opens new window) to the image. The effect takes an array with two value corresponding to radius and sigma. Example:

{% set transformedImage = craft.imagerx.transformImage(img, { width: 500, effects: { adaptiveBlur: [10, 2] }}) %}

# adaptiveSharpen [array]

Applies an adaptive sharpen effect (opens new window) to the image. The effect takes an array with two value corresponding to radius and sigma.

# clut [array]

Applies a clut (color lookup table) effect (opens new window) to the image, using Imagick's clutImage method (opens new window). You probably want to use it together with modulate to get a real duotone effect. Example:

{% set transformedImage = craft.imagerx.transformImage(image, { width: 500, effects: { modulate: [100, 0, 100], clut: 'gradient:darkblue-aqua' } }) %}

The parameter is the image definition string sent to Imagick's newPseudoImage method (opens new window). You can use any valid color values. Example with rgba colors:

{% set transformedImage = craft.imagerx.transformImage(image, { width: 500, effects: { modulate: [100, 0, 100], clut: 'gradient:rgba(255,0,0,0.8)-rgba(255,255,0,1)' } }) %}

Please note that the alpha value doesn't actually make the color transparent, it just has the effect of moving the gradient's center point towards the color with the least transparency.

# colorBlend [array]

Blends the image with the color and opacity specified. Example:

{% set transformedImage = craft.imagerx.transformImage(image, { width: 500, effects: { colorBlend: ['rgb(255, 153, 51)', 0.5] } }) %}

# contrast [bool|int|float]

Increases or decreases the contrast of the image. A value greater than 0 increases contrast while a negative value decreases it.

# contrastStretch [array]

Enhances the contrast of a color image by adjusting the pixels color to span the entire range of colors available. Uses Imagick's contrastStretch method (opens new window). Example:

{% set transformedImage = craft.imagerx.transformImage(image, { width: 500, effects: { contrastStretch: [500*500*0.10, 500*500*0.90] } }) %}

# floodfillpaint [array]

Flood fills an image with a color, using Imagick's floodFillPaintImage method (opens new window). The effect takes an array with three parameters, fill, fuzz and target. Examples:

{# Fills white pixels with red, using a little fuzzy matching #}
{% set transformedImage = craft.imagerx.transformImage(asset, { width: 300, effects: { floodfillpaint: ['#ff00ff', 0.02, '#ffffff'] } }) %}

{# Autodetects background color (using top left pixel) and fills it with red, using quite a bit of fuzzy matching #}
{% set transformedImage = craft.imagerx.transformImage(asset, { width: 300, effects: { floodfillpaint: ['#ff00ff', 0.1, 'auto'] } }) %}

{# Autodetects background color (using top left pixel) and fills it with transparent, using quite a bit of fuzzy matching #}
{% set transformedImage = craft.imagerx.transformImage(asset, { width: 300, format: 'png', effects: { floodfillpaint: ['rgba(0, 0, 0, 0)', 0.1, 'auto'] } }) %}

Also see transparentpaint for an alternative if you want to remove the background.

# levels [array]

Adjusts an image's levels, using Imagick's levelImage method (opens new window). The effect takes an array corresponding to black point, gamma, white point and channel (optional). Example:

{% set transformedImage = craft.imagerx.transformImage(img, { width: 500, effects: { levels: [50, 1, 200, 'blue'] }}) %}

You can use negative values for black point and white point to do a level stretch/offset:

{% set transformedImage = craft.imagerx.transformImage(img, { width: 500, effects: { levels: [-100, 1, 255, 'blue'] }}) %}

Possible values for channel is 'red', 'green', and 'blue'. Omit it all together to adjust levels for all channels.

# modulate [array]

Let's you adjust brightness, saturation and hue with Imagick's modulateImage method (opens new window). Example (drops saturation by 80%):

{% set transformedImage = craft.imagerx.transformImage(image, { width: 500, effects: { modulate: [100, 20, 100] } }) %}

# motionBlur [array]

Blurs an image, using Imagick's motionBlurImage method (opens new window). The effect takes an array with three values, corresponding to radius, sigma and angle. Example:

{% set transformedImage = craft.imagerx.transformImage(img, { width: 500, effects: { motionBlur: [20, 40, 45] }}) %}

# normalize [bool]

Enhances the contrast of the image by normalizing the colorspace. Uses Imagick's normalizeImage method (opens new window).

# oilPaint [int]

Creates an oil paint effect, using Imagick's oilPaintImage method (opens new window).

# opacity [float|array]

Makes the image semi-transparent.

{% set transformedImage = craft.imagerx.transformImage(image, { width: 500, effects: { opacity: [0.5, '#f00'] } }) %}

Please note, if you pass in 'transparent' as background color, and the image format doesn't support full and partial transparency (ie, it's not png), the filter will have some side-effect. For jpegs no apparent effect will happen. For gifs, the whole image may become transparent (since partial transparency isn't supported). Either pass in the desired backgrond color you want to fade towards, or convert the image to a format that supports transparency.

# posterize [array]

Reduces image colors by applying the posterize effect. Uses Imagick's posterizeImage method (opens new window). Example:

{% set transformedImage = craft.imagerx.transformImage(image, { width: 500, effects: { posterize: [136, 'no'] } }) %}

The second parameter refers to which dither method is used. Allowed values are:

'no': No dithering.
'riemersma': Riemersma dithering (opens new window).
'floydsteinberg': Floyd–Steinberg dithering (opens new window).

# quantize [array|int]

Reduces the number of colors in an image, using Imagick's quantizeImage method (opens new window). This can help to reduce filesize, especially for gif images. Example:

{% set transformedImage = craft.imagerx.transformImage(image, { width: 500, effects: { quantize: 32 } }) %}

The parameter can be an int, indicating the number of colors to reduce to, or an array that corresponds to the functions $numberColors (int), $treedepth (int) and $dither (bool) parameters. Example with default treeDepth, but dithering:

{% set transformedImage = craft.imagerx.transformImage(image, { width: 500, effects: { quantize: [32, 0, true] } }) %}

# radialBlur [int]

Blurs an image, using Imagick's radialBlurImage method (opens new window).

# sepia [int]

Converts the image to sepia tones.

# tint [array]

Tints the image using Imagick's tintImage method (opens new window).

# transparentpaint [array]

Replaces a color with transparent pixels, using Imagick's transparentPaintImage method (opens new window). The effect takes an array with three parameters, target, opacity and fuzz. Examples:

{# Makes white pixels transparent, using a little fuzzy matching #}
{% set transformedImage = craft.imagerx.transformImage(asset, { width: 300, format: 'png', effects: { transparentpaint: ['#ffffff', 0, 0.015] } }) %}

{# Autodetects background color (using top left pixel) and makes it 50% transparent, using quite a bit of fuzzy matching #}
{% set transformedImage = craft.imagerx.transformImage(asset, { width: 300, format: 'png', effects: { transparentpaint: ['auto', 0.5, 0.2] } }) %}

# unsharpmask [array]

Applies an unsharp mask with Imagick's unsharpMaskImage method (opens new window). Example:

{% set transformedImage = craft.imagerx.transformImage(image, { width: 500, effects: { unsharpMask: [0, 0.5, 1, 0.05] } }) %}

← Transform parameters Models →