Image

Image component - Abyssale REST API

Available properties:

Property	Description
image_url	String: HTTP(s) URL of your image. i.e: https://www.abyssale.com/imge/abyssale_logo.png It must be a public accessible link and be 10 mo maximum. Supported files: jpeg, png, webp, svg, gif.
image_encoded	String: Base64 encoded image as value. i.e.: /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAIBAQE... If the image_url is given, this property will be ignored.
opacity	Integer between 0 and 100. Opacity of the image
fitting_type	Go to Fitting Type documentation
alignment	Go to Alignment documentation
mask_name mask_properties	Go to Mask documentation
filter_name filter_properties	Go to Filter documentation
overlay_direction overlay_color_1 overlay_color_2	Go to Overlay documentation
shadow_color shadow_blur shadow_offset_x shadow_offset_y	Go to Shadow documentation

Fitting Type

fitting_type: That defines the way the image will be inserted in the bounding box.

Two properties are supported:

• cover: It will force the image to fill entirely the area without changing the aspect ratio (hence the image will be cropped if its ratio is not the same as the container)

• fill: The image will be displayed entirely within the box.

Examples:

"fitting_type": "fill"
"fitting_type": "cover"

Alignment

alignment can be defined to override the default image alignment.

It can be of two forms:

• One string: top, middle, bottom, left, center, right

• Two strings: One vertical alignment parameter (top, middle, bottom) associated with a horizontal alignment parameter (left, center, right) separated by a space. i.e: (top left , middle right)

Examples:

(fitting_type: cover): alignment: middle center
(fitting_type: cover): alignment: middle right
(fitting_type: fill) alignment: bottom center
(fitting_type: fill) alignment: middle center

Mask

A mask can be added to the image by using the mask_name property:

• circle: The image will be rendered as a circle. No additional property is available.

• rounded_corners: Corners of the image will be rounded. It requires another property: mask_properties.

• blob The image will be rendered as a blob. No additional property is available.

• squircle: The image will be rendered as a squircle. No additional property is available.

• pentagon: The image will be rendered as a pentagon. No additional property is available.

mask_properties: Dict

• Only support radius (integer) as parameter. This parameter should only be used in combination with rounded_corners.

Examples:

(fitting_type: fill) mask_name: circle
(fitting_type: fill) "mask_name": "rounded_corners", "mask_properties": { "radius": 10 }
(fitting_type: fill) mask_name: blob
(fitting_type: fill) mask_name: squircle
(fitting_type: fill) mask_name: pentagon
(fitting_type: fill) mask_name: hexagon
(fitting_type: fill) mask_name: parallelogram

Filter

A filter can be added to the image by using the filter_name property:

• grayscale: It converts the input image to grayscale. No additional property is available.

• duotone: Apply a duotone filter to the image. It requires another property: filter_properties.

filter_properties: Dict. Only support name (string) as parameter. This parameter should only be used in combination with duotone.

Available list of duotone names:

blue_orange	deep_green_light_green	BrightRed_light_yellow
brown_pale_green	brown_beige	deep_blue_green
deep_blue_red	deep_purple_orange	deep_purple_beige
deep_purple_pale_green	deep_blue_pale_green

Examples

(Original image)
filter_name: grayscale
"filter_name": "duotone", "filter_properties": { "name": "blue_orange" }

Overlay

A (monochrome or gradient) overlay can be added to the image.

The 3 following properties are required:

• overlay_direction: String. Direction of the overlay. Can be horizontal, vertical or diagonal

• overlay_color_1: String. First color of the overlay. 6-8 Digits Hexa color.

• overlay_color_2: String. Second color of the overlay. 6-8 Digits Hexa color.

If you want a monochrome overlay, just set the 2 colors properties with the same color (in that case, the direction is then useless).

Examples:

Gradient: "overlay_direction": "horizontal" "overlay_color_1": "#FF000080" (alpha hexa 80 = 0.5) "overlay_color_2": "#0000FF1A" (alpha hexa 1A = 0.1)
"overlay_direction": "vertical" "overlay_color_1": "#FF000080" "overlay_color_2": "#0000FF1A"
"overlay_direction": "diagonal" "overlay_color_1": "#FF000080" "overlay_color_2": "#0000FF1A"
Monochrome "overlay_direction": "horizontal" "overlay_color_1": "#FF000080" "overlay_color_2": "#FF000080"