Generate Hundreds of Social Media Images from a Single Template

通过单一模板生成数百张社交媒体图片

Social Images Don’t Scale Manually. You publish three blog posts a week. Each one needs a Twitter card, a LinkedIn image, and an Instagram post. That’s nine images per week, all with the same layout but different titles. You open Canva, duplicate the template, update the text, export, resize for the next platform, repeat. By month two you’ve made 108 images by hand. By month six, 648. The layout hasn’t changed — just the title and maybe a background image. The manual work is pure repetition. This is a templating problem. Define the layout once, inject the dynamic content per post, generate the image. The Iteration Layer’s Image Generation API does exactly this — you describe your template as a stack of layers, swap the variable parts, and get an image back for each combination.

社交媒体图片无法通过手动方式实现规模化。假设你每周发布三篇博客文章，每一篇都需要 Twitter 卡片、LinkedIn 图片和 Instagram 帖子。这意味着每周要制作九张图片，它们布局相同但标题各异。你打开 Canva，复制模板，更新文字，导出，调整尺寸以适配不同平台，然后重复上述步骤。到了第二个月，你已经手动制作了 108 张图片；到了第六个月，这个数字变成了 648 张。布局其实从未改变，变化的只有标题，或许还有背景图。这种手动工作纯粹是重复劳动。这是一个典型的模板化问题。只需定义一次布局，为每篇文章注入动态内容，即可生成图片。Iteration Layer 的图像生成 API 正是为此而生——你将模板描述为一系列图层堆栈，替换其中的变量部分，即可为每种组合获取对应的图片。

One Template, Three Platforms

一个模板，三个平台

Social platforms have different image dimensions: Twitter/X cards: 1200x675 LinkedIn posts: 1200x627 Instagram posts: 1080x1080 The layout logic is the same across all three — background, accent shape, title text, optional image. Only the dimensions and positioning change. Here’s what a Twitter/X card request looks like — a dark background, accent bar, title, and site name:

社交平台对图片尺寸的要求各不相同： Twitter/X 卡片：1200x675 LinkedIn 帖子：1200x627 Instagram 帖子：1080x1080 这三个平台的布局逻辑是一样的——背景、强调形状、标题文字以及可选的图片。变化的只有尺寸和定位。以下是一个 Twitter/X 卡片的请求示例，包含深色背景、强调条、标题和站点名称：

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: 675, },
  output_format: "png",
  fonts: [ /* ... font definitions ... */ ],
  layers: [
    { type: "solid-color", index: 0, hex_color: "#0f172a", },
    { type: "solid-color", index: 1, hex_color: "#e94560", position: { x_in_px: 0, y_in_px: 0, }, dimensions: { width_in_px: 1200, height_in_px: 6, }, },
    { type: "text", index: 2, text: "Why We Moved to Postgres", font_name: "Inter", font_weight: "bold", font_size_in_px: 48, text_color: "#ffffff", text_align: "left", position: { x_in_px: 60, y_in_px: 169, }, dimensions: { width_in_px: 1080, height_in_px: 338, }, },
    { type: "text", index: 3, text: "acme.dev", font_name: "Inter", font_size_in_px: 20, text_color: "#64748b", text_align: "left", position: { x_in_px: 60, y_in_px: 615, }, dimensions: { width_in_px: 200, height_in_px: 30, }, },
  ],
});

The template uses a dark background, a colored accent bar at the top, the post title in white, and the site name at the bottom. The font size and text positioning adapt to the canvas size.

该模板使用了深色背景、顶部的彩色强调条、白色的文章标题以及底部的站点名称。字体大小和文字位置会根据画布尺寸自动调整。

Generating for All Platforms

为所有平台生成图片

To generate for all three platforms, make one API call per platform with the same layer structure but different dimensions. Adjust text positions proportionally — for Instagram’s 1080x1080 square, move the title lower and the site name further down. For LinkedIn’s 1200x627, use the same horizontal layout with slightly different vertical spacing.

要为这三个平台生成图片，只需针对每个平台调用一次 API，保持图层结构不变，但使用不同的尺寸。按比例调整文字位置——对于 Instagram 的 1080x1080 正方形，将标题向下移动，站点名称也相应下移。对于 LinkedIn 的 1200x627，使用相同的水平布局，只需微调垂直间距即可。

Adding Visual Variety

增加视觉多样性

A solid background works, but it gets repetitive across dozens of posts. Two layer types add variety without changing the template structure:

1. Background images with low opacity. The image-overlay layer puts a full-canvas image behind your text. Set the opacity to 10-20% so the text stays readable against the dark background. Each post can use a different background image — a relevant photo, an abstract pattern, a gradient texture.
2. Angled accent shapes. Rectangle layers support angledEdges for diagonal designs. Instead of a flat bar across the top, use an angled rectangle for a more dynamic look.

纯色背景虽然可行，但在处理几十篇帖子时会显得单调。以下两种图层类型可以在不改变模板结构的情况下增加多样性：

1. 低透明度背景图。 使用 image-overlay 图层将全屏图片置于文字后方。将透明度设置为 10-20%，以确保文字在深色背景下依然清晰可读。每篇帖子都可以使用不同的背景图——如相关的照片、抽象图案或渐变纹理。
2. 倾斜的强调形状。 矩形图层支持 angledEdges 属性，可用于实现对角线设计。与其在顶部使用平直的横条，不如使用倾斜的矩形，让视觉效果更具动感。

Batch Generation from a Content Feed

从内容源批量生成

The real value shows up when you connect this to your content pipeline. Pull posts from your CMS, generate images for each one. Each post gets a color based on its category. Engineering posts are blue, product posts are red, tutorials are amber. The template is the same — only the title, color, and filename change.

当你将此功能接入内容流水线时，真正的价值便体现出来了。从 CMS 中提取文章，并为每一篇生成图片。每篇文章根据其分类获得特定的颜色：工程类文章为蓝色，产品类为红色，教程类为琥珀色。模板始终如一，变化的只有标题、颜色和文件名。

Template Variants

模板变体

A single template handles most posts, but some content types deserve their own layout. Product launches might show a screenshot. Team announcements might show a headshot. Quote cards might center a pull quote. Define each variant as its own template function.

虽然单一模板可以处理大多数帖子，但某些内容类型需要专属的布局。产品发布可能需要展示截图，团队公告可能需要展示头像，引用卡片可能需要将引文居中。你可以将每种变体定义为独立的模板函数。