Dynamic Image generation with URL
Discover how to create personalised images from links - Abyssale Dynamic Images
Last updated
Discover how to create personalised images from links - Abyssale Dynamic Images
Last updated
Changes can be done just as you would normally do with the REST API except it is directly done in the URL with query strings.
All available properties are listed under the pages.
Each query string is composed of a key and a value, such as key=value
. The key
corresponds to the layer property that needs to be customised and value
to the property value.
For instance if the design you would like to customise has a text_title
element and you would like to change its color
; the key will be text_title.color
.
If you would like to change:
the payload content of a or a ,
the image_url of an or a ,
the property_name
can be omitted, such as layer_name=value
Once all of your changes are defined, the final URL will look like:
https://img.abyssale.com/{designId}?{changes}
For instance:
the designId is 34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3
the template contains 2 elements: a text element named text_title
and an image element named company_logo
.
The text_title
content will be Welcome
, will be white (#FFFFFF) and will have a red background color (#FF0000).
the company_logo
should contain the following image:
As changes are announced by URL, all values must be URL encoded beforehand.
https://img.abyssale.com/34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3?text_title=Welcome&text_title.color=#FFFFFF&text_title.background_color=#FF00000&company_logo=https%3A%2F%2Fuploads-ssl.webflow.com%2F6214efb2d4b5d94158f2ff03%2F6218f45ff39a58c8dbf7eb2c_abyssale-logo.svg
To use a particular format, you have to specify it in the base url and looks like:
https://img.abyssale.com/{designId}/{formatName}
For instance, if your designId
is 34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3
and the format you would like to generate is instagram-story
, the base URL will be:
https://img.abyssale.com/34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3/instagram-story