image().resize()

With the Twig-function {{ assets.image(string $imgurl).resize(int $width, int $height).src() }} you can resize an image on the fly. This is useful if you want to render a certain image size in the frontend, for example a list of news-boxes with preview images on the start-page.

Example Usage

Resize an image to 800 px width:

<img src="{{ assets.image(metatabs.meta.heroimage).resize(800).src() }}" />

Resize an image to 500 px height:

<img src="{{ assets.image(metatabs.meta.heroimage).resize(false,500).src() }}" />

Crop an image to 800px width and 500px height:

<img src="{{ assets.image(metatabs.meta.heroimage).resize(800,500).src() }}" />

You can also chain the resize-method and the grayscale-method.

Parameter

  • Param $imgurl: The relative link to the image resource in the media-library as string.
  • Param $width: The width of the resized image in pixel (int or false).
  • Param $height: The height of the resized image in pixel (int or false).
  • Return: The relative url to the resized image or false.

Explanation

This Twig-method uses method chaining. You have to provide all three methods:

  • image($imgurl): To get the source image.
  • resize($width, $height): To resize or crop the image.
  • src(): To generate the url to the resized image.

Typemill will first check, if the image is already in the folder /media/custom/ and return the url to the image. If the image is not there yet, it will generate the resized version and store it in folder /media/custom/.