Image Editor
We also have an Image Service you can use to resize images on-the-fly! Please take a look at the documentation.
Storyblok’s Assets Library has an image editor built right into it! No need to disturb your design team for a small cropping job or to spin up Photoshop and leave Storyblok. You can do all your edits directly in our app!
)
Then, select the {1} Open Image Editor button.
)
Landing on the image editor should look like this:
)
You can also disable access to the image editor via Roles & Permissions by selecting a role and then selecting {1} Deny access to image editor.
)
Upon selecting Crop, there will be a crop frame around the image in which you can move the sides and corners to customize your crop section.
From the Crop section you can also do the following:
| Function | Description |
|---|---|
| Rotate left | Rotates the image to the left |
| Flip horizontal | Flips image horizontally |
| Crop shape | Gives options for various crop ratios such as: square, 16:9, 9:16, 4:3, and 3:4 |
| Crop boundary | Sets a boundary for the image to be cropped. It will prevent you from moving the image within the boundary. |
| Rotate | Rotate the image by dragging the degrees bar left or right |
| Zoom | Zoom in on the image by dragging the degrees bar to the left |
)
| Modifier | Description |
|---|---|
| Brightness | Makes the image brighter (closer to white) or darker (closer to black) |
| Contrast | Make the bright areas of your image brighter and the dark areas darker |
| Saturation | Increase or decrease the color intensity of the image (example: adjust up to make the red redder) |
| Exposure | Adjusts the image’s exposure to light by making the image brighter or darker |
| Temperature | Adjusting the warmth (more yellow) or coolness (more blue) of the image |
| Gamma | Makes the image brighter or darker according to the individual pixels of the monitor |
| Clarity | Adds or subtracts to the sharpness of the image |
| Vignette | Adds an inner shadow to the corners of the image |
)
)
| Type | Description |
|---|---|
| Line color | A popup color palette with preset colors |
| Line width | Choose how thick or thin the line will be for your marker of choice |
| Sharpie | The “pen” function — freehand draw your marks |
| Eraser | Erases any marks made with any marking feature |
| Arrow | Creates a single straight line but with a pointer at the end |
| Rectangle | Creates a hollow rectangle shape |
| Ellipse | Creates a hollow ellipse shape |
| Text | Adds text on top of the image |
)
)
)
)