Storyblok Raises $80M Series C - Read News

What’s the True Total Price of Enterprise CMS? Find out here.

Skip to main content

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!

Note:

Image Editor only supports JPEG and PNG image formats. Other image formats like webp, avif, gif, svg are not supported.

Access the Image Editor

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

1
2

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

An annotated screenshot of how to open the image editor
1

Landing on the image editor should look like this:

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.

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

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:

FunctionDescription
Rotate leftRotates the image to the left
Flip horizontalFlips image horizontally
Crop shapeGives options for various crop ratios such as: square, 16:9, 9:16, 4:3, and 3:4
Crop boundarySets a boundary for the image to be cropped. It will prevent you from moving the image within the boundary.
RotateRotate the image by dragging the degrees bar left or right
ZoomZoom in on the image by dragging the degrees bar to the left

Finetune

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

ModifierDescription
BrightnessMakes the image brighter (closer to white) or darker (closer to black)
ContrastMake the bright areas of your image brighter and the dark areas darker
SaturationIncrease or decrease the color intensity of the image (example: adjust up to make the red redder)
ExposureAdjusts the image’s exposure to light by making the image brighter or darker
TemperatureAdjusting the warmth (more yellow) or coolness (more blue) of the image
GammaMakes the image brighter or darker according to the individual pixels of the monitor
ClarityAdds or subtracts to the sharpness of the image
VignetteAdds an inner shadow to the corners of the image

Filter

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

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

TypeDescription
Line colorA popup color palette with preset colors
Line widthChoose how thick or thin the line will be for your marker of choice
SharpieThe “pen” function — freehand draw your marks
EraserErases any marks made with any marking feature
ArrowCreates a single straight line but with a pointer at the end
RectangleCreates a hollow rectangle shape
EllipseCreates a hollow ellipse shape
TextAdds text on top of the image

Sticker

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

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

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

1
2