Back to Details

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字段

FieldRequiredDefaultDescription
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
NoAuto from subtitleOutput 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:
  1. Serve via Image Forge backend: copy to 
    /projects/image-forge/output/
    → accessible at 
    http://localhost:3021/api/output/filename.png
  2. Use 
    file://
    URLs (must be absolute paths)
  3. Start any local HTTP server in the image directory
如果产品图片是本地文件，可选择以下方式：
  1. 通过Image Forge后端服务：复制到
    /projects/image-forge/output/
    → 可通过
    http://localhost:3021/api/output/filename.png
    访问
  2. 使用
    file://
    格式URL（必须为绝对路径）
  3. 在图片目录启动任意本地HTTP服务器

Dependencies

依赖项

  • Node.js
  • Playwright (
    npx playwright install chromium
    if not installed)
  • Node.js
  • Playwright（若未安装，执行
    npx playwright install chromium
    ）