There are a few functions to access data from or manipulate images. Not when you access an image like {{page.image}} it will return it's media id. In order to retrieve a URL of that image, or resize it, you must call a function off it. 


.getImage() turns a media ID into an image url. Any time the .getImage() is used it to serve an image it automatically applies a couple optimizations: it auto-orients the image, strips exif data and compresses the image. This call can also take parameters to crop or resize images.

By default the image will be sized to fit. If you want the image to be cropped, crop must be specified, and requires both width and height to be stated - for example: foobar.getImage(100,100,crop). When images are cropped looks for the first edge it hits, then sizes down to the second edge it hits, the remainder of the image is cropped. For example with a landscape image that's being cropped to 200 x 200 - once finds the top edge of the image, it'll bring up the bottom edge of the image until it hits the edge of the 200px mark, then it will crop the sides.

Images that are sized to fit can take either a width or height, but does not require both. For example: foobar.getImage(,200,fit), foobar.getImage(100,,fit), or foobar.getImage(100,200,fit). will size them down in a similar way to crop, however the whole entire image will be sized to fit within the given dimensions in the call.

Please note that we do not do highly specific optimizations for PNG or JPEG file types.

How Crops or Fits Images

Watch this video to see how Crops or Fits images.

Using .getImage()

Please see the variety of .getImage() calls below:

Looping Through an Image Field that has Multiple Images

When you setup an image datatype that has multiple images in it, use this parsley code to loop through those images.