Styles And Transformations

You can create styles and transformation to process your image before it's displayed/rendered.

Styles

A style is a combination of transformations in a specific order.

The available styles are to be managed on /admin/system/orm/model/ImageStyle.

You can expose an image style to the asset browser so users can adjust the image of the style.

Transformations

A transformation is a specific image process task.

The available transformations are to be managed on /admin/system/orm/model/ImageTransformation.

When creating a transformation, try to give it a meaningful name.
The names of transformations are not exposed to non-administrators.

eg. A crop transformation to 200px width and 100px height could be named crop-100x100.
This way you know what you are dealing with when managing the styles.

Check out ride-lib-image for more information about the default transformations.

Blur

Blurs your image.

This transformation has following options:

Option	Type	Required	Default	Description
radius	integer	no	10	Blur radius

Crop

Crops your image by resizing it first to an optimal dimension.

This transformation requires the following options:

Option	Type	Required	Default	Description
width	integer	yes	---	Width to crop to in pixels
height	integer	yes	---	Height to crop to in pixels

width: width to crop to in pixels
height: height to crop to in pixels

Flip

Flips your image over the X-axis and/or the Y-axis.

This transformation requires the following options:

Option	Type	Required	Default	Description
mode	string	yes	---	Mode, can be horizontal, vertical or both

Grayscale

Converts your image to a grayscaled image.

This transformations has no options.

Resize

Resizes your image to fit a maximum width and/or height.

This transformation requires one of the following options:

Option	Type	Required	Default	Description
width	integer	yes, if no height provided	---	Maximum width of the resulting image
height	integer	yes, if no width is provided	---	Maximum height of the resulting image

Watermark

Adds a watermark to your image.

This transformation has the following options:

Option	Type	Required	Default
watermark	string	yes	---
x	integer	no	0
y	integer	no	0

Smarty Functions

image

Return the URL of a transformed image.

Parameter	Type	Required	Description
src	string	yes	Source url or file for this image.
default	string	no	Fallback for src parameter.
transformation	string	no	Name of the transformation.
var	string	no	Variable name to assign this URL to.

⚠️ Transformations may require additional parameters.

{image src=$content->image var='image' transformation='blur'}
{image src=$content->image var='image' transformation='crop' width=200 height=100}

asset

Function to render an asset

Parameter	Type	Required	Description
src	string or AssetEntry	yes	Asset to render. Can be an id, a slug or an instance of AssetEntry
style	string	no	Machine name of the style
var	string	no	Variable to assign the result to

{asset src="my-asset"}
{asset src=15 style="thumbnail"}