This endpoint allows users to create a custom banner image with specified dimensions, background color, text, and optional background image. The URL of the generated banner is returned in the response.
Method
POST
JSON Input Options for Banner Creation
Here is a extensive documentation for the JSON options you can use to create your banner.
width
- Description: The width of the banner image.
- Possible Values: Any positive integer representing pixels.
- Example:
1200
height
- Description: The height of the banner image.
- Possible Values: Any positive integer representing pixels.
- Example:
628
background_color
- Description: The background color of the banner if no image is provided.
- Possible Values: Any valid CSS color value (e.g., color names, hex codes, RGB values).
- Example:
"white"
,"#FFFFFF"
,"rgb(255,255,255)"
image (Make sur the provided url is publicly accessible)
- Description: URL of the background image to be used.
- Possible Values: A valid URL pointing to an image file.
- Example:
"https://example.com/image.jpg"
text
- Description: The main text to be added to the banner.
- Possible Values: Any string.
- Example:
"Personalize your images to include your prospectâs name, location and much more!"
font_size
- Description: The size of the text font.
- Possible Values: Any positive integer representing font size in points.
- Example:
80
text_color
- Description: The color of the text.
- Possible Values: Any valid CSS color value.
- Example:
"#002538"
,"black"
highlight_color
- Description: The color used to highlight specific text segments within the banner text. To apply the highlight color, encapsulate the text segment with
****
. Note that spaces are not allowed within the encapsulated text. - Example: To highlight the word “images” in the text “Personalize your images”, use “Personalize your ****images****”.
- Possible Value: Any valid color code (e.g., “#F02538” for red).
font_name
- Description: The name of the font to be used for the text.
- Possible Values: The name of any font available in the
fonts
directory. - Example:
"arial"
,"callina"
watermark_text
- Description: The watermark text to be added to the banner.
- Possible Values: Any string.
- Example:
"© 2024 NodeTrigger"
watermark_fontsize
- Description: The font size of the watermark text.
- Possible Values: Any positive integer representing font size in points.
- Example:
25
watermark_position
- Description: The position of the watermark text.
- Possible Values:
"bottom_right"
,"bottom"
,"bottom_left"
,"upper_left"
,"up"
,"upper_right"
- Example:
"bottom_right"
text_align
- Description: The alignment of the main text.
- Possible Values:
"left"
,"right"
,"center"
- Example:
"left"
text_area
- Description: The area where the text should be placed on the banner.
- Possible Values:
"left"
,"right"
,"up"
,"bottom"
,"center"
- Example:
"right"
padding_top
- Description: The padding from the top of the banner.
- Possible Values: Any positive integer representing pixels.
- Example:
10
padding_bottom
- Description: The padding from the bottom of the banner.
- Possible Values: Any positive integer representing pixels.
- Example:
10
padding_left
- Description: The padding from the left of the banner.
- Possible Values: Any positive integer representing pixels.
- Example:
10
padding_right
- Description: The padding from the right of the banner.
- Possible Values: Any positive integer representing pixels.
- Example:
100
watermark_image_url
Description: The URL of the image to be used as a watermark.
Possible Values: Any valid URL pointing to an image file.
Example: “https://example.com/path/to/watermark.png”
watermark_image_width
Description: The width of the watermark image in pixels.
Possible Values: Any positive integer representing the width in pixels.
Example: 100
watermark_image_height
Description: The height of the watermark image in pixels.
Possible Values: Any positive integer representing the height in pixels.
Example: 100
watermark_image_opacity
Description: The opacity level of the watermark image.
Possible Values: Any integer between 0 and 255, where 0 is fully transparent and 255 is fully opaque.
Example: 128
watermark_image_padding_top
Description: The top padding of the watermark image in pixels.
Possible Values: Any positive integer representing the padding in pixels.
Example: 10
watermark_image_padding_left
Description: The left padding of the watermark image in pixels.
Possible Values: Any positive integer representing the padding in pixels.
Example: 10
watermark_image_padding_right
Description: The right padding of the watermark image in pixels.
Possible Values: Any positive integer representing the padding in pixels.
Example: 10
watermark_image_padding_bottom
Description: The bottom padding of the watermark image in pixels.
Possible Values: Any positive integer representing the padding in pixels.
Example: 10
watermark_image_position
Description: The position of the watermark image on the banner.
Possible Values: “top”, “bottom”, “top_left”, “top_right”, “bottom_left”, “bottom_right”
Example: “bottom_right”
Sample JSON Request
{
"width": 800,
"height": 400,
"backgroundColor": "white",
"image": "https://example.com/image.jpg",
"text": "Sample Banner Text",
"fontSize": 30,
"textColor": "black",
"fontName": "arial",
"watermark_text": "Sample Watermark",
"watermark_size": 20,
"textAlign": "center",
"textArea": "top"
}
Think outside the box
This node offers several options to create a banner, use them creatively to achieve the desired results.
When using the watermark_image
feature, you have the flexibility to add not just your logo, but also get creative with your banner compositions. Consider adding a play button to indicate video content, or any other image that enhances your design. The watermark_image can be positioned anywhere on the canvas using the watermark_image_position
and padding values, giving you full control over the layout.
For example, to center the overlay image both horizontally and vertically, you can use the following JSON:
{
"width": 800,
"height": 400,
"background_color": "white",
"watermark_image_url": "https://example.com/path/to/overlay.png",
"watermark_image_width": 100,
"watermark_image_height": 100,
"watermark_image_opacity": 128,
"watermark_image_padding_top": 150,
"watermark_image_padding_left": 350,
"watermark_image_padding_right": 350,
"watermark_image_padding_bottom": 150,
"watermark_image_position": "top_left"
}
In this example, the watermark_image
is centered by setting equal padding values for watermark_image_padding_top
, watermark_image_padding_bottom
, watermark_image_padding_left
, and watermark_image_padding_right
. This allows you to precisely control where your overlay image appears, making your banners more engaging and visually appealing.
Available Fonts
- arial
- callina
- centiesans
- comfortaa.bold
- comfortaa.light
- comfortaa.regular
- digitalt
- durum_kebab
- dymofontinvers
- lowvetica
- sallome
Response
image_url
(string): URL of the generated banner image.text
(string): The text displayed on the banner.
Example Requests
Example 1: Basic Banner Creation
curl -X POST https://node.nodetrigger.com/create-banner \
-H "Content-Type: application/json" \
-d '{
"width": 800,
"height": 400,
"background_color": "#002538",
"text_align": "center",
"text_area": "center",
"text": "Welcome to NodeTrigger!",
"fontSize": 49,
"text_color": "white",
"watermark_image_url": "https://i.ibb.co/rMS6bS3/nodetrigger.png",
"watermark_image_width": 50,
"watermark_image_height": 50,
"watermark_image_padding_bottom": 15,
"watermark_image_opacity":255,
"watermark_image_position": "bottom"
}'
Results
Example 2: Banner with Background Image
curl -X POST https://node.nodetrigger.com/create-banner \
-H "Content-Type: application/json" \
-d '{
"width": 1200,
"height": 628,
"background_color": "white",
"image": "https://i.ibb.co/zGJW94x/Publicite-Facebook-1200x628-px-2.jpg",
"text": "Personalize your ****images**** to include your prospect's name, location and much more!",
"font_size": 90,
"text_color": "#002538",
"highlight_color": "#F02538",
"font_name": "lowvetica",
"watermark_text": "© 2024 NodeTrigger",
"watermark_fontsize": 25,
"watermark_position": "bottom_right",
"text_align": "left",
"text_area": "right",
"padding_top": 10,
"padding_bottom": 10,
"padding_left": 10,
"padding_right": 100
}
'
Results
This example will create a banner of 1200×628 pixels, with a specified background image. The main text is added in the right area of the banner with the specified font size, color, and alignment. Additionally, a watermark is added at the bottom right of the banner. The paddings are specified to adjust the spacing around the text.