Image Resizing

The imagesize filter is used in templates to resize images and do other processing. The parameters specifying what you want to do to the image should be passed to the filter in the form of a JSON object.

<img src="{{ image_url|imagesize({width:100,height:100,crop:true,bw:true}) }}" alt="Thumbnail" />


All parameters are optional.

  • width: The maximum width of the resulting image. If this is not specified the image will only be resized based on the height.
  • height: The maximum height of the resulting image. If this is not specified the image will only be resized based on the width.
  • crop: If this is set to true, the image will be cropped to match the specified width and height exactly. If you leave out the crop parameter, the image will be resized to fit within the specified width and height, but will retain its original aspect ratio. It only makes sense to crop the image if you also specify both the width and the height.
  • bw: If this is set to true the image will be converted to greyscale.
  • colorize: Set this to an rgb hex code to recolor an image. For example, if you wanted a sepia-toned image: {{ image_url|imagesize({colorize:"#704214"}) }}
  • radius: This rounds the corners of the image to the specified radius (in pixels). If you don't specify a background color (see below) the resulting image will be forced to a 24-bit PNG format. This is notgenerally recommended, unless the source image is also a PNG.
  • background: If the radius is also set, this is used to specify a background color to fill the corners with. For example, if you wanted an image on a bright red background to have corners with a 10-pixel radius: {{ image_url|imagesize({radius:10,background:"#ff0000"}) }}
  • quality: Sets the output quality for JPEG files (ignored for other formats). This should be a number between 0 and 100, the default is 75.