Comment on page
Image
Image component - Abyssale REST API
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 | |
alignment | |
mask_name
mask_properties | |
filter_name
filter_properties | |
overlay_direction
overlay_color_1
overlay_color_2 | |
shadow_color
shadow_blur
shadow_offset_x
shadow_offset_y
|
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.
"fitting_type": "fill" |  |
"fitting_type": "cover" |  |
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)
(fitting_type: cover): alignment: middle center | |
(fitting_type: cover): alignment: middle right |  |
(fitting_type: fill) alignment: bottom center |  |
(fitting_type: fill) alignment: middle center | |
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.blobThe 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 withrounded_corners.
(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 |  |
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.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 | |
(Original image) |  |
filter_name: grayscale |  |
"filter_name": "duotone",
"filter_properties": {
"name": "blue_orange"
} |  |
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 behorizontal,verticalordiagonaloverlay_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).
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" |  |
Last modified 2mo ago