Image Editor

hint:

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!

Access the Image Editor

{1} Select the Assets tab then {2} select any image in the gallery

app.storyblok.com
Storyblok editing capabilities
1
2

Then, select the {1} Open Image Editor button.

app.storyblok.com
An annotated screenshot of how to open the image editor
1

Landing on the image editor should look like this:

app.storyblok.com
Storyblok editing capabilities
hint:

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.

app.storyblok.com
An annotated screenshot of how to disable the image editor via Roles and Permissions
1

Features

There are several features that are available to edit an image with:

Crop

app.storyblok.com
A screenshot of the Image Editor with the Crop feature selected

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

Finetune

app.storyblok.com
A screenshot of the Image Editor with the Finetune feature selected

Modify your existing image’s brightness, color contrast, etc. by adjusting features by percentage.

Modifiers

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

Filter

app.storyblok.com
A screenshot of the Image Editor with the Filter feature selected

Selecting a filter will add an overlay effect to the image to change its look/feel.

Annotate

app.storyblok.com
A screenshot of the Image Editor with the Annotate feature selected

Mark your image with several choices in marking styles. An eraser is available to fix any mistakes made with any annotation tool.

Annotation types

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

Sticker

app.storyblok.com
A screenshot of the Image Editor with the Sticker feature selected

Storyblok has a collection of emojis you can use to “stick” onto images. You can also upload own images to use as stickers.

Redact

app.storyblok.com
A screenshot of the Image Editor with the Redact feature selected

The ability to select any section of the image and pixelate it within a square or rectangle shape. You can also control the percent of pixelization you would like to have in effect.

Frame

app.storyblok.com
A screenshot of the Image Editor with the Frame feature selected

Choose from several different frames available to attach a decorative border around your image.

Saving the Asset

When Save is selected, it will override the original image

To save it as a new image:

{1} Click arrow beside the Save button

{2} Choose Save as new

app.storyblok.com
Storyblok editing capabilities
1
2