Skip to content
cccskills
FreePublished on GitHub

generate-og-image

Generate a branded Open Graph image with a generative wave background, logo, and tagline.

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

Works withn8n
See how to install

Files included (1)

  • SKILL.md13.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Generate OG Image

Sites and apps use this recipe to generate a unique, branded OG image per page. A solid-color canvas holds a decorative background image with rounded corners, a logo, the brand name, and a tagline — ready to serve as an og:image meta tag.

APIs Used

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

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_in_px": 1200,
        "height_in_px": 630,
    },
    "output_format": "jpeg",
    "layers": [
      {
        "index": 0,
        "type": "solid-color",
        "hex_color": "#FFFFFF"
      },
      {
        "index": 1,
        "type": "image",
        "file": {
            "type": "url",
            "name": "background.png",
            "url": "https://example.com/background.png",
        },
        "position": {
            "x_in_px": 20.0,
            "y_in_px": 20.0,
        },
        "dimensions": {
            "width_in_px": 1160,
            "height_in_px": 478,
        },
        "border_radius": 24
      },
      {
        "index": 2,
        "type": "image",
        "file": {
            "type": "url",
            "name": "logo.svg",
            "url": "https://example.com/logo.svg",
        },
        "position": {
            "x_in_px": 20.0,
            "y_in_px": 542.0,
        },
        "dimensions": {
            "width_in_px": 56,
            "height_in_px": 56,
        }
      },
      {
        "index": 3,
        "type": "text",
        "text": "Nordlicht GmbH",
        "font_name": "Inter",
        "font_size_in_px": 32,
        "font_weight": "bold",
        "text_color": "#000000",
        "text_align": "left",
        "vertical_align": "center",
        "position": {
            "x_in_px": 90.0,
            "y_in_px": 542.0,
        },
        "dimensions": {
            "width_in_px": 300,
            "height_in_px": 56,
        }
      },
      {
        "index": 4,
        "type": "text",
        "text": "Build faster with our platform",
        "font_name": "Inter",
        "font_size_in_px": 28,
        "font_weight": "medium",
        "text_color": "#6B7280",
        "text_align": "right",
        "vertical_align": "center",
        "should_auto_scale": true,
        "position": {
            "x_in_px": 20.0,
            "y_in_px": 542.0,
        },
        "dimensions": {
            "width_in_px": 1160,
            "height_in_px": 56,
        }
      }
    ]
  }'
import { IterationLayer } from "iterationlayer";
const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

const result = await client.generateImage({
  dimensions: {
    width_in_px: 1200,
    height_in_px: 630,
  },
  output_format: "jpeg",
  layers: [
    {
      index: 0,
      type: "solid-color",
      hex_color: "#FFFFFF",
    },
    {
      index: 1,
      type: "image",
      file: {
        type: "url",
        name: "background.png",
        url: "https://example.com/background.png",
      },
      position: {
        x_in_px: 20,
        y_in_px: 20,
      },
      dimensions: {
        width_in_px: 1160,
        height_in_px: 478,
      },
      border_radius: 24,
    },
    {
      index: 2,
      type: "image",
      file: {
        type: "url",
        name: "logo.svg",
        url: "https://example.com/logo.svg",
      },
      position: {
        x_in_px: 20,
        y_in_px: 542,
      },
      dimensions: {
        width_in_px: 56,
        height_in_px: 56,
      },
    },
    {
      index: 3,
      type: "text",
      text: "Nordlicht GmbH",
      font_name: "Inter",
      font_size_in_px: 32,
      font_weight: "bold",
      text_color: "#000000",
      text_align: "left",
      vertical_align: "center",
      position: {
        x_in_px: 90,
        y_in_px: 542,
      },
      dimensions: {
        width_in_px: 300,
        height_in_px: 56,
      },
    },
    {
      index: 4,
      type: "text",
      text: "Build faster with our platform",
      font_name: "Inter",
      font_size_in_px: 28,
      font_weight: "medium",
      text_color: "#6B7280",
      text_align: "right",
      vertical_align: "center",
      should_auto_scale: true,
      position: {
        x_in_px: 20,
        y_in_px: 542,
      },
      dimensions: {
        width_in_px: 1160,
        height_in_px: 56,
      },
    },
  ],
});
from iterationlayer import IterationLayer
client = IterationLayer(api_key="YOUR_API_KEY")

result = client.generate_image(
    dimensions={
        "width_in_px": 1200,
        "height_in_px": 630,
    },
    output_format="jpeg",
    layers=[
        {
            "index": 0,
            "type": "solid-color",
            "hex_color": "#FFFFFF",
        },
        {
            "index": 1,
            "type": "image",
            "file": {
                "type": "url",
                "name": "background.png",
                "url": "https://example.com/background.png",
            },
            "position": {
                "x_in_px": 20,
                "y_in_px": 20,
            },
            "dimensions": {
                "width_in_px": 1160,
                "height_in_px": 478,
            },
            "border_radius": 24,
        },
        {
            "index": 2,
            "type": "image",
            "file": {
                "type": "url",
                "name": "logo.svg",
                "url": "https://example.com/logo.svg",
            },
            "position": {
                "x_in_px": 20,
                "y_in_px": 542,
            },
            "dimensions": {
                "width_in_px": 56,
                "height_in_px": 56,
            },
        },
        {
            "index": 3,
            "type": "text",
            "text": "Nordlicht GmbH",
            "font_name": "Inter",
            "font_size_in_px": 32,
            "font_weight": "bold",
            "text_color": "#000000",
            "text_align": "left",
            "vertical_align": "center",
            "position": {
                "x_in_px": 90,
                "y_in_px": 542,
            },
            "dimensions": {
                "width_in_px": 300,
                "height_in_px": 56,
            },
        },
        {
            "index": 4,
            "type": "text",
            "text": "Build faster with our platform",
            "font_name": "Inter",
            "font_size_in_px": 28,
            "font_weight": "medium",
            "text_color": "#6B7280",
            "text_align": "right",
            "vertical_align": "center",
            "should_auto_scale": True,
            "position": {
                "x_in_px": 20,
                "y_in_px": 542,
            },
            "dimensions": {
                "width_in_px": 1160,
                "height_in_px": 56,
            },
        },
    ],
)

package main

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

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

	result, err := client.GenerateImage(
		il.GenerateImageRequest{
			Dimensions:   il.Dimensions{
     WidthInPx: 1200,
     HeightInPx: 630,
   },
			OutputFormat: "jpeg",
			Layers: []il.Layer{
				il.NewSolidColorBackgroundLayer(0, "#FFFFFF"),
				il.NewImageLayer(
					1,
					il.FileInput{Type: "url", Name: "background.png", Url: "https://example.com/background.png"},
					il.Position{
       XInPx: 20,
       YInPx: 20,
     },
					il.Dimensions{
       WidthInPx: 1160,
       HeightInPx: 478,
     },
				),
				il.NewImageLayer(
					2,
					il.FileInput{Type: "url", Name: "logo.svg", Url: "https://example.com/logo.svg"},
					il.Position{
       XInPx: 20,
       YInPx: 542,
     },
					il.Dimensions{
       WidthInPx: 56,
       HeightInPx: 56,
     },
				),
				il.NewTextLayer(
					3, "Nordlicht GmbH",
					"Inter", 32, "#000000",
					il.Position{
       XInPx: 90,
       YInPx: 542,
     },
					il.Dimensions{
       WidthInPx: 300,
       HeightInPx: 56,
     },
				),
				il.NewTextLayer(
					4, "Build faster with our platform",
					"Inter", 28, "#6B7280",
					il.Position{
       XInPx: 20,
       YInPx: 542,
     },
					il.Dimensions{
       WidthInPx: 1160,
       HeightInPx: 56,
     },
				),
			},
		},
	)
	if err != nil {
		panic(err)
	}

}
{
  "name": "Generate OG Image",
  "nodes": [
    {
      "parameters": {
        "content": "## Generate OG Image\n\nSites and apps use this recipe to generate a unique, branded OG image per page. A solid-color canvas holds a decorative background image with rounded corners, a logo, the brand name, and a tagline \u2014 ready to serve as an og:image meta tag.\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": "870009e9-dee8-4568-8367-98332d39cd2f",
      "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": "78a96ff7-e05d-4dc9-b20e-87457c906808",
      "name": "Step 1 Note"
    },
    {
      "parameters": {},
      "type": "n8n-nodes-base.manualTrigger",
      "typeVersion": 1,
      "position": [
        250,
        300
      ],
      "id": "f6a7b8c9-6666-4000-8000-000000000001",
      "name": "Manual Trigger"
    },
    {
      "parameters": {
        "resource": "imageGeneration",
        "widthInPx": 1200,
        "heightInPx": 630,
        "outputFormat": "jpeg",
        "layersJson": "[{\"index\":0,\"type\":\"solid-color\",\"hex_color\":\"#FFFFFF\"},{\"index\":1,\"type\":\"image\",\"file\":{\"type\":\"url\",\"name\":\"background.png\",\"url\":\"https://example.com/background.png\"},\"position\":{\"x\":20.0,\"y\":20.0},\"dimensions\":{\"width\":1160,\"height\":478},\"border_radius\":24},{\"index\":2,\"type\":\"image\",\"file\":{\"type\":\"url\",\"name\":\"logo.svg\",\"url\":\"https://example.com/logo.svg\"},\"position\":{\"x\":20.0,\"y\":542.0},\"dimensions\":{\"width\":56,\"height\":56}},{\"index\":3,\"type\":\"text\",\"text\":\"Nordlicht GmbH\",\"font_name\":\"Inter\",\"font_size_in_px\":32,\"font_weight\":\"bold\",\"text_color\":\"#000000\",\"text_align\":\"left\",\"vertical_align\":\"center\",\"position\":{\"x\":90.0,\"y\":542.0},\"dimensions\":{\"width\":300,\"height\":56}},{\"index\":4,\"type\":\"text\",\"text\":\"Build faster with our platform\",\"font_name\":\"Inter\",\"font_size_in_px\":28,\"font_weight\":\"medium\",\"text_color\":\"#6B7280\",\"text_align\":\"right\",\"vertical_align\":\"center\",\"should_auto_scale\":true,\"position\":{\"x\":20.0,\"y\":542.0},\"dimensions\":{\"width\":1160,\"height\":56}}]",
        "fontsJson": "[]"
      },
      "type": "n8n-nodes-iterationlayer.iterationLayer",
      "typeVersion": 1,
      "position": [
        500,
        300
      ],
      "id": "f6a7b8c9-6666-4000-8000-000000000002",
      "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"
  }
}
Generate a branded OG image with dimensions 1200x630 pixels. Use the generate_image tool with these layers:

1. Background: solid-color layer with [background color]
2. Background art: image layer with [background image URL] positioned with rounded corners
3. Logo: image layer with [logo URL] positioned bottom-left
4. Brand name: text layer with [brand name] in bold, 32px
5. Tagline: text layer with [tagline text] right-aligned, auto-scaled

Response

{
  "success": true,
  "data": {
    "buffer": "/9j/4AAQSkZJRgABAQ...",
    "mime_type": "image/jpeg"
  }
}

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