Image
Image component - Abyssale REST API
Available properties:
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
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 withrounded_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:
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
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 behorizontal
,vertical
ordiagonal
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"
Last updated