Image

Image component - Abyssale REST API

Available properties:

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:

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:

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:

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:

Examples

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:

PreviousButtonNextLogo

Last updated