Skip to content
cccskills
FreePublished on GitHub

generate-product-promo-banner

Optimize a product photo and compose it into a promotional banner with sale text and pricing.

The English summary is being prepared. Showing the original description.

Works withn8n

Run score Not tested

See how to install

Files included (1)

  • SKILL.md12.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Generate Product Promo Banner

E-commerce teams use this pipeline to create promotional banners from raw product photos. Optimize the product image for web, then composite it onto a banner with sale messaging and pricing — ready for ads, email campaigns, or social media.

APIs Used

Image Transformation (0.5 credits/request), Image Generation (1 credits/request)

Prerequisites

You need an Iteration Layer API key. Get one at platform.iterationlayer.com during the 7-day trial.

For full integration guidance (SDKs, auth, MCP, error handling), see the Iteration Layer Integration Guide.

Implementation

# Step 1: Optimize product photo
TRANSFORM_RESULT=$(curl -s -X POST \
  https://api.iterationlayer.com/image-transformation/v1/transform \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "file": {
      "type": "url",
      "name": "product-photo.jpg",
      "url": "https://example.com/products/raw-photo.jpg"
    },
    "operations": [
      {
        "type": "resize",
        "width_in_px": 1000,
        "height_in_px": 1000,
        "fit": "contain"
      },
      { "type": "auto_contrast" },
      {
          "type": "sharpen",
          "sigma": 1.5,
      },
      {
        "type": "convert",
        "format": "webp",
        "quality": 90
      }
    ]
  }')

PRODUCT_IMAGE_BASE64=$(echo "$TRANSFORM_RESULT" | jq -r '.data.buffer')

# Step 2: Generate promotional banner with optimized product photo
curl -X POST \
  https://api.iterationlayer.com/image-generation/v1/generate \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d "{
    \"dimensions\": {
      \"width\": 1200,
      \"height\": 628
    },
    \"output_format\": \"png\",
    \"layers\": [
      {
        \"index\": 0,
        \"type\": \"solid-color\",
        \"hex_color\": \"#1a1a2e\"
      },
      {
        \"index\": 1,
        \"type\": \"static-image\",
        \"buffer\": \"$PRODUCT_IMAGE_BASE64\",
        \"position\": {
          \"x\": 600.0,
          \"y\": 64.0
        },
        \"dimensions\": {
          \"width\": 500,
          \"height\": 500
        }
      },
      {
        \"index\": 2,
        \"type\": \"text\",
        \"text\": \"Flash Sale\",
        \"font_name\": \"Montserrat\",
        \"font_size_in_px\": 56,
        \"text_color\": \"#FFFFFF\",
        \"font_weight\": \"bold\",
        \"position\": {
          \"x\": 60.0,
          \"y\": 180.0
        },
        \"dimensions\": {
          \"width\": 500,
          \"height\": 80
        }
      },
      {
        \"index\": 3,
        \"type\": \"text\",
        \"text\": \"Save 25%\",
        \"font_name\": \"Montserrat\",
        \"font_size_in_px\": 36,
        \"text_color\": \"#E94560\",
        \"font_weight\": \"bold\",
        \"position\": {
          \"x\": 60.0,
          \"y\": 280.0
        },
        \"dimensions\": {
          \"width\": 500,
          \"height\": 60
        }
      }
    ]
  }"
import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

// Step 1: Optimize product photo
const transformResult = await client.transformImage({
  file: {
    type: "url",
    name: "product-photo.jpg",
    url: "https://example.com/products/raw-photo.jpg",
  },
  operations: [
    {
      type: "resize",
      width_in_px: 1000,
      height_in_px: 1000,
      fit: "contain",
    },
    { type: "auto_contrast" },
    {
      type: "sharpen",
      sigma: 1.5,
    },
    {
      type: "convert",
      format: "webp",
      quality: 90,
    },
  ],
});

const productImageBase64 = transformResult.data.buffer;

// Step 2: Generate promotional banner with optimized product photo
const bannerResult = await client.generateImage({
  dimensions: {
    width_in_px: 1200,
    height_in_px: 628,
  },
  output_format: "png",
  layers: [
    {
      index: 0,
      type: "solid-color",
      hex_color: "#1a1a2e",
    },
    {
      index: 1,
      type: "image",
      buffer: productImageBase64,
      position: {
        x_in_px: 600.0,
        y_in_px: 64.0,
      },
      dimensions: {
        width_in_px: 500,
        height_in_px: 500,
      },
    },
    {
      index: 2,
      type: "text",
      text: "Flash Sale",
      font_name: "Montserrat",
      font_size_in_px: 56,
      text_color: "#FFFFFF",
      font_weight: "bold",
      position: {
        x_in_px: 60.0,
        y_in_px: 180.0,
      },
      dimensions: {
        width_in_px: 500,
        height_in_px: 80,
      },
    },
    {
      index: 3,
      type: "text",
      text: "Save 25%",
      font_name: "Montserrat",
      font_size_in_px: 36,
      text_color: "#E94560",
      font_weight: "bold",
      position: {
        x_in_px: 60.0,
        y_in_px: 280.0,
      },
      dimensions: {
        width_in_px: 500,
        height_in_px: 60,
      },
    },
  ],
});
from iterationlayer import IterationLayer
client = IterationLayer(api_key="YOUR_API_KEY")

# Step 1: Optimize product photo
transform_result = client.transform_image(
    file={
        "type": "url",
        "name": "product-photo.jpg",
        "url": "https://example.com/products/raw-photo.jpg",
    },
    operations=[
        {
            "type": "resize",
            "width_in_px": 1000,
            "height_in_px": 1000,
            "fit": "contain",
        },
        {"type": "auto_contrast"},
        {
            "type": "sharpen",
            "sigma": 1.5,
        },
        {
            "type": "convert",
            "format": "webp",
            "quality": 90,
        },
    ],
)

product_image_base64 = transform_result["data"]["buffer"]

# Step 2: Generate promotional banner with optimized product photo
banner_result = client.generate_image(
    dimensions={
        "width_in_px": 1200,
        "height_in_px": 628,
    },
    output_format="png",
    layers=[
        {
            "index": 0,
            "type": "solid-color",
            "hex_color": "#1a1a2e",
        },
        {
            "index": 1,
            "type": "image",
            "buffer": product_image_base64,
            "position": {
                "x_in_px": 600.0,
                "y_in_px": 64.0,
            },
            "dimensions": {
                "width_in_px": 500,
                "height_in_px": 500,
            },
        },
        {
            "index": 2,
            "type": "text",
            "text": "Flash Sale",
            "font_name": "Montserrat",
            "font_size_in_px": 56,
            "text_color": "#FFFFFF",
            "font_weight": "bold",
            "position": {
                "x_in_px": 60.0,
                "y_in_px": 180.0,
            },
            "dimensions": {
                "width_in_px": 500,
                "height_in_px": 80,
            },
        },
        {
            "index": 3,
            "type": "text",
            "text": "Save 25%",
            "font_name": "Montserrat",
            "font_size_in_px": 36,
            "text_color": "#E94560",
            "font_weight": "bold",
            "position": {
                "x_in_px": 60.0,
                "y_in_px": 280.0,
            },
            "dimensions": {
                "width_in_px": 500,
                "height_in_px": 60,
            },
        },
    ],
)

package main

import il "github.com/iterationlayer/sdk-go"

func main() {
	client := il.NewClient("YOUR_API_KEY")

	// Step 1: Optimize product photo
	transformResult, err := client.TransformImage(il.TransformImageRequest{
		File: il.FileInput{Type: "url", Name: "product-photo.jpg", Url: "https://example.com/products/raw-photo.jpg"},
		Operations: []il.TransformOperation{
			il.NewResizeOperation(1000, 1000, "contain"),
			{Type: "auto_contrast"},
			il.NewSharpenOperation(1.5),
			il.NewConvertOperation("webp"),
		},
	})
	if err != nil {
		panic(err)
	}

	// Step 2: Generate promotional banner with optimized product photo
	bannerResult, err := client.GenerateImage(
		il.GenerateImageRequest{
			Dimensions: il.Dimensions{
				WidthInPx: 1200, HeightInPx: 628,
			},
			OutputFormat: "png",
			Layers: []il.Layer{
				il.NewSolidColorBackgroundLayer(0, "#1a1a2e"),
				il.NewStaticImageLayer(
					1, transformResult.Data.Buffer,
					il.Position{
       XInPx: 600.0,
       YInPx: 64.0,
     },
					il.Dimensions{
       WidthInPx: 500,
       HeightInPx: 500,
     },
				),
				il.NewTextLayer(
					2, "Flash Sale", "Montserrat", 56, "#FFFFFF",
					il.Position{
       XInPx: 60.0,
       YInPx: 180.0,
     },
					il.Dimensions{
       WidthInPx: 500,
       HeightInPx: 80,
     },
				),
				il.NewTextLayer(
					3, "Save 25%", "Montserrat", 36, "#E94560",
					il.Position{
       XInPx: 60.0,
       YInPx: 280.0,
     },
					il.Dimensions{
       WidthInPx: 500,
       HeightInPx: 60,
     },
				),
			},
		},
	)
	if err != nil {
		panic(err)
	}

}
{
  "name": "Generate Product Promo Banner",
  "nodes": [
    {
      "parameters": {
        "content": "## Generate Product Promo Banner\n\nE-commerce teams use this pipeline to create promotional banners from raw product photos. Optimize the product image for web, then composite it onto a banner with sale messaging and pricing \u2014 ready for ads, email campaigns, or social media.\n\n**Note:** This workflow uses the Iteration Layer community node (`n8n-nodes-iterationlayer`). Install it via Settings > Community Nodes on self-hosted n8n, or add it directly on n8n Cloud with Verified Community Nodes enabled.",
        "height_in_px": 280,
        "width_in_px": 500,
        "color": 2
      },
      "type": "n8n-nodes-base.stickyNote",
      "typeVersion": 1,
      "position": [
        200,
        40
      ],
      "id": "165c6cae-c517-466c-b457-017d41ef255f",
      "name": "Overview"
    },
    {
      "parameters": {
        "content": "### Step 1: Generate Image\nResource: **Image Generation**\n\nConfigure the Image Generation parameters below, then connect your credentials.",
        "height_in_px": 160,
        "width_in_px": 300,
        "color": 6
      },
      "type": "n8n-nodes-base.stickyNote",
      "typeVersion": 1,
      "position": [
        475,
        100
      ],
      "id": "d0e30702-3236-4d5b-b6db-58943e78c2e7",
      "name": "Step 1 Note"
    },
    {
      "parameters": {},
      "type": "n8n-nodes-base.manualTrigger",
      "typeVersion": 1,
      "position": [
        250,
        300
      ],
      "id": "8c932661-770b-4c6d-b9af-e11756428109",
      "name": "Manual Trigger"
    },
    {
      "parameters": {
        "resource": "imageGeneration",
        "widthInPx": 1200,
        "heightInPx": 630,
        "outputFormat": "png",
        "layersJson": "[]",
        "fontsJson": "[]"
      },
      "type": "n8n-nodes-iterationlayer.iterationLayer",
      "typeVersion": 1,
      "position": [
        500,
        300
      ],
      "id": "c8fc1270-b021-4063-a9f2-c926a0b9e623",
      "name": "Generate Image",
      "credentials": {
        "iterationLayerApi": {
          "id": "1",
          "name": "Iteration Layer API"
        }
      }
    }
  ],
  "connections": {
    "Manual Trigger": {
      "main": [
        [
          {
            "node": "Generate Image",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  },
  "settings": {
    "executionOrder": "v1"
  }
}
Optimize a product photo and compose it into a promotional banner. First, use transform_image to resize and optimize [product image URL] for web. Then, use generate_image to create a banner with these layers:

1. Background: gradient layer with [brand colors]
2. Product photo: image layer with the optimized product image
3. Sale text: text layer with [sale message] in large bold text
4. Price: text layer with [price] and [original price] strikethrough

Response

{
  "success": true,
  "data": {
    "buffer": "iVBORw0KGgoAAAANSUhEUgAA...",
    "mime_type": "image/png"
  }
}

Links

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Resize, sharpen, and compress an image to fit email platform size limits in a single pipeline.

The English summary is being prepared. Showing the original description.

iterationlayer/skills4Updated Jun 9, 2026

Compress an image to fit within a specific file size in bytes using quality-first compression.

The English summary is being prepared. Showing the original description.

iterationlayer/skills4Updated Jun 9, 2026

Convert a contract PDF to clean markdown for clause extraction or LLM analysis.

The English summary is being prepared. Showing the original description.

iterationlayer/skills4Updated Jun 9, 2026

Convert external documents — specs, contracts, reports — to markdown for knowledge base ingestion.

The English summary is being prepared. Showing the original description.

iterationlayer/skills4Updated Jun 9, 2026

Convert a document to clean markdown suitable for chunking and embedding in a RAG pipeline.

The English summary is being prepared. Showing the original description.

iterationlayer/skills4Updated Jun 9, 2026

Convert an image between PNG, JPEG, and WebP formats with quality control for web optimization.

The English summary is being prepared. Showing the original description.

iterationlayer/skills4Updated Jun 9, 2026

See all skills by iterationlayer

Report a problem with this skill