/create-banner

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

/create-banner

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
}
'
/create-banner

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.