Storyblok
Search Storyblok's Documentation
  1. Crop

Crop

Manual Crop

Manually crop an image by specifying a rectangular area with coordinates for two points: the top-left (X1, Y1) and bottom-right (X2, Y2) corners: /m/X1xY1:X2:Y2

Define each point as a pair of coordinates starting from the image's top-left corner. Try the interactive demo below.

Preview that reacts to API
demo-sunflower.png
Copied to the clipboard
Manual Crop

Once enabled, use the sliders to set the coordinates of the rectangular area to be cropped. The width and height sliders, if present, will be ignored.

Smart Crop

Append /smart after resizing the image to automatically apply a focal point via face detection. This only works with images showing faces.

Try the interactive demo below.

Preview that reacts to API
demo-image-human.jpeg
Copied to the clipboard
Smart Crop