This reference guide gives you a list of each property available on each element overridable via the API.
Properties are specified in the `elements` object, either at the template level, or at a size-specific level. This gives you the flexibility to override values from your template on all sizes that you specify in the request, or at specific sizes, or a combination of both.
Property | Type | Description | Example |
---|---|---|---|
format | text | Example text | |
quality | number | When format is set to jpg, sets the quality of the resulting image. | 0.7 |
template | string | The API name of the template. | quote |
sizes | array | ||
url | string | A URL of a blog post or page. | https://www.cnn.com |
batchUrl | string | A URL of a resource containing an array of element overwrites. | |
webhook | string | A URL of a webhook that will receive a POST notification when batch processing (either from Google Sheets, the API, or Airtable) is complete. | |
airtableApiKey | string | An API key generated within Airtable used to access data. | |
tweet | string | A URL to a tweet on twitter.com. | |
updateTwitterHeader | boolean | Once the user has authenticated to Twitter, the profile's header can update with an image from the given template. |
|
googleSheetsDocumentId | string | The ID of a Google Sheets document to use for batch processing. |
|
googleSheetsSheetName | string | The name of the Sheet within the Google Sheets document. |
|
useAws | boolean | Determines whether Switchboard Canvas should attempt to move the created image to a custom AWS S3 bucket. |
|
Property | Type | Description | Example |
---|---|---|---|
angle | number | The angle of the text within its bounding box. | 0 - 360 |
fillTextBox | boolean | If true, the text resizes automatically to fix the bounding box. |
|
fontFamily | text | Example text | |
opacity | number | The opacity of the text. | 0.0 - 1.0 |
horizontalAlignment | enum | The horizontal alignment of the text with it's bounding box. |
|
maximumFontSize | number | The maximum font size to use when fillTextBox is true. | 100 |
text | text | The non-empty text to use in the element. | Example text |
textColor | string | The color of the text. | #FFFFFF |
translateTo | enum | The language code specific if this text should be translated. |
|
Property | Type | Description | Example |
---|---|---|---|
angle | number | The angle of the image within its bounding box. | 0 - 360 |
backgroundColor | string | The background color when `contain` is true. | #FF0000 |
backgroundOpacity | number | The opacity of the background color. | 0.0 - 1.0 |
contain | boolean | Whether the image is fully contained within it's bounding box. |
|
cornerRadius | number | The size of the corner radius of the image. | 0 - 50 |
horizontalAlignment | enum | The horizontal alignment of the image within it's bounding box. |
|
opacity | number | The opacity of the image element. | 0.0 - 1.0 |
removeBackground | number | Uses machine learning to remove the background from the primary subject in an image. | true |
url | string | https://via.placeholder.com/1920x180 | |
qrCode | string | https://www.google.com | |
verticalAlignment | enum | The vertical alignment of the image within it's bounding box. |
|
Property | Type | Description | Example |
---|---|---|---|
angle | number | The angle of rectangle within it's bounding box. | 0 - 360 |
fillColor | string | The color of the rectangle. | #FF0000 |
opacity | number | The opacity of the rectangle element. | 0.0 - 1.0 |
{
"template": "my-template",
"sizes": [
{
"width": 1920,
"height": 1080
},
{
"width": 1080,
"height": 1080
}
],
"elements": {
"text1": {
"text": "Both sizes will have this text!"
}
}
}
{
"template": "my-template",
"sizes": [
{
"width": 1920,
"height": 1080,
"elements": {
"text1": {
"text": "This image will be 1920x1080"
}
}
},
{
"width": 1080,
"height": 1080,
"elements": {
"text1": {
"text": "And this image will be 1080x1080"
}
}
}
]
}
{
"template": "my-template",
"sizes": [
{
"width": 1920,
"height": 1080,
"elements": {
"text1": {
"text": "Overriding the text on this 1920x1080 image"
}
}
},
{
"width": 1080,
"height": 1080,
"elements": {
"text1": {
"text": "And this square has a different background image!"
},
"background": {
"url": "https://www.somewhere.com/nice-image.png"
}
}
},
{
"width": 1080,
"height": 1920,
"elements": {
"background": {
"opacity": 0.5
}
}
}
],
"elements": {
"text1": {
"text": "Setting some default text here"
}
}
}
We care about the protection of your data. Read our Privacy Policy.