etsy-listing-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Etsy Listing Image Generator

Etsy商品列表图片生成器

Generate professional Etsy listing images from HTML templates via Playwright screenshot rendering.

通过Playwright截图渲染功能，从HTML模板生成专业的Etsy商品列表图片。

Quick Start — Single Image

快速开始——单张图片生成

bash

node scripts/render.mjs <template> <image-url> <title> <subtitle> <badge> <output>

Example:

bash

node scripts/render.mjs \
  assets/puppet-listing.html \
  "http://localhost:3021/api/output/moses-characters.png" \
  "Bible Story Puppet Printables" \
  "Moses & The Exodus" \
  "12 ELEMENTS + 4 BACKGROUNDS" \
  output/moses-listing.png

bash

node scripts/render.mjs <template> <image-url> <title> <subtitle> <badge> <output>

示例：

bash

node scripts/render.mjs \
  assets/puppet-listing.html \
  "http://localhost:3021/api/output/moses-characters.png" \
  "Bible Story Puppet Printables" \
  "Moses & The Exodus" \
  "12 ELEMENTS + 4 BACKGROUNDS" \
  output/moses-listing.png

Quick Start — Batch

快速开始——批量生成

Create a JSON file with an array of objects:

json

[
  { "file": "http://localhost:3021/api/output/moses-characters.png", "subtitle": "Moses & The Exodus" },
  { "file": "http://localhost:3021/api/output/david-characters.png", "subtitle": "David & Goliath" }
]

Run:

bash

node scripts/render.mjs --batch assets/puppet-listing.html stories.json output/listings/

创建一个包含对象数组的JSON文件：

json

[
  { "file": "http://localhost:3021/api/output/moses-characters.png", "subtitle": "Moses & The Exodus" },
  { "file": "http://localhost:3021/api/output/david-characters.png", "subtitle": "David & Goliath" }
]

运行命令：

bash

node scripts/render.mjs --batch assets/puppet-listing.html stories.json output/listings/

Batch JSON Fields

批量JSON字段

Field	Required	Default	Description
`file` / `image` / `url`	Yes	—	Product image URL (HTTP or file://)
`title`	No	"Bible Story Puppet Printables"	Large top text on banner
`subtitle` / `name`	No	—	Smaller bottom text on banner
`badge`	No	"12 ELEMENTS + 4 BACKGROUNDS"	Left badge text
`output`	No	Auto from subtitle	Output filename

字段	必填	默认值	描述
`file` / `image` / `url`	是	—	产品图片URL（HTTP或file://格式）
`title`	否	"Bible Story Puppet Printables"	横幅顶部大文本
`subtitle` / `name`	否	—	横幅底部小文本
`badge`	否	"12 ELEMENTS + 4 BACKGROUNDS"	左侧徽章文本
`output`	否	自动从副标题生成	输出文件名

Template Placeholders

模板占位符

Templates are plain HTML files. The renderer replaces these strings:

```
PRODUCT_IMAGE_URL
```
→ product/character image
```
TITLE_TEXT
```
→ large banner text
```
SUBTITLE_TEXT
```
→ smaller banner text
```
BADGE_LEFT_TEXT
```
→ left pill badge
```
INSTANT DOWNLOAD
```
→ right badge (hardcoded, edit HTML to change)

模板为纯HTML文件，渲染器会替换以下字符串：

```
PRODUCT_IMAGE_URL
```
→ 产品/角色图片
```
TITLE_TEXT
```
→ 横幅大文本
```
SUBTITLE_TEXT
```
→ 横幅小文本
```
BADGE_LEFT_TEXT
```
→ 左侧胶囊徽章
```
INSTANT DOWNLOAD
```
→ 右侧徽章（硬编码，需编辑HTML修改）

Template Design — Current Base (puppet-listing.html)

模板设计——当前基础模板（puppet-listing.html）

1400×2000px portrait format
White background, sage green (#4D6840) bottom banner
Gold pill badges (top-left: custom, top-right: INSTANT DOWNLOAD)
Poppins font throughout

Product image uses

object-fit: cover; object-position: center center

Subtle TheSunDaisy watermark

1400×2000px 竖版格式
白色背景，鼠尾草绿（#4D6840）底部横幅
金色胶囊徽章（左上角：自定义，右上角：INSTANT DOWNLOAD）
全程使用Poppins字体

产品图片使用

object-fit: cover; object-position: center center

样式

淡色TheSunDaisy水印

Creating New Templates

创建新模板

Copy

assets/puppet-listing.html

and modify. Key CSS to adjust:

```
.canvas
```
width/height — canvas dimensions
```
.banner
```
height — green section size
```
.product-area
```
top/bottom — image boundaries
```
.badge
```
styling — pill badge appearance
```
.title
```
/
```
.subtitle
```
— typography

Keep the placeholder strings (

PRODUCT_IMAGE_URL

, etc.) for the renderer to replace.

复制

assets/puppet-listing.html

并修改。需调整的关键CSS：

```
.canvas
```
width/height — 画布尺寸
```
.banner
```
height — 绿色区域大小
```
.product-area
```
top/bottom — 图片边界
```
.badge
```
styling — 胶囊徽章样式
```
.title
```
/
```
.subtitle
```
— 排版

保留占位符字符串（

PRODUCT_IMAGE_URL

等）以便渲染器替换。

Serving Local Images

本地图片服务

If product images are local files, either:

Serve via Image Forge backend: copy to

/projects/image-forge/output/

→ accessible at

http://localhost:3021/api/output/filename.png

Use
```
file://
```
URLs (must be absolute paths)
Start any local HTTP server in the image directory

如果产品图片是本地文件，可选择以下方式：

通过Image Forge后端服务：复制到

/projects/image-forge/output/

→ 可通过

http://localhost:3021/api/output/filename.png

访问

使用
```
file://
```
格式URL（必须为绝对路径）
在图片目录启动任意本地HTTP服务器

Dependencies

依赖项

Node.js
Playwright (
```
npx playwright install chromium
```
if not installed)

Node.js
Playwright（若未安装，执行
```
npx playwright install chromium
```
）