Podcast Pull-Quote

Podcast Pull-Quote

Podcast clip cover with a big serif pull-quote, episode tag, play glyph and host lockup — swap speaker photo, quote and names.

Type
Image
Format
HD · 16:9
Orientation
Landscape
Variablesphoto
Open in editor

Free template · opens in the editor, no account required.

Customize Podcast Pull-Quote

Podcast Pull-Quote is a ready-to-render Video thumbnails image design formatted for HD · 16:9 and support for variables, photo. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

9 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.

episodeTagText
EP. 47 · THE BUILD
quoteAText
We shipped the whole thing
quoteBText
in one weekend
quoteCText
— and it changed everything.
hostText
Dana Okafor
roleText
Founder, Northwind Labs
durationText
34 MIN
accentColor
#8B7CF6

The exact JSON payload

This is the full render config — POST it to the API, or open it in the editor to tweak.

Open in editor ↗
{
  "type": "image",
  "name": "img-thumb-podcast",
  "resolution": "hd",
  "outputFormat": "png",
  "backgroundColor": "#0C0A14",
  "variables": {
    "episodeTag": "EP. 47 · THE BUILD",
    "quoteA": "We shipped the whole thing",
    "quoteB": "in one weekend",
    "quoteC": "— and it changed everything.",
    "host": "Dana Okafor",
    "role": "Founder, Northwind Labs",
    "duration": "34 MIN",
    "accent": "#8B7CF6",
    "speakerImage": "https://images.unsplash.com/photo-1589903308904-1010c2294adc?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3w3MDgwMTZ8MHwxfHNlYXJjaHwyfHxwb2RjYXN0JTIwaG9zdCUyMG1pY3JvcGhvbmV8ZW58MHx8fHwxNzgzNTI2ODk3fDA&ixlib=rb-4.1.0&q=80&w=1600"
  },
  "visuals": [
    {
      "type": "IMAGE",
      "src": "{{speakerImage}}",
      "width": 1280,
      "height": 720,
      "position": "center-center",
      "resize": "cover",
      "track": 0
    },
    {
      "type": "SVG",
      "width": 1280,
      "height": 720,
      "position": "center-center",
      "track": 1,
      "svg": "<svg width='1280' height='720' viewBox='0 0 1280 720' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='sx' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='#0C0A14' stop-opacity='0.97'/><stop offset='0.54' stop-color='#0C0A14' stop-opacity='0.7'/><stop offset='1' stop-color='#0C0A14' stop-opacity='0.06'/></linearGradient><radialGradient id='gl' cx='0.12' cy='0.28' r='0.7'><stop offset='0' stop-color='#8B7CF6' stop-opacity='0.26'/><stop offset='1' stop-color='#8B7CF6' stop-opacity='0'/></radialGradient></defs><rect width='1280' height='720' fill='url(#sx)'/><rect width='1280' height='720' fill='url(#gl)'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 96,
      "width": 340,
      "height": 46,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='340' height='46' viewBox='0 0 340 46' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='340' height='46' rx='23' fill='#8B7CF6' fill-opacity='0.16' stroke='{{accent}}' stroke-opacity='0.6' stroke-width='1.2'/><path d='M26 15 L44 23 L26 31 Z' fill='{{accent}}'/><text x='62' y='30' font-family='Space Grotesk, Arial' font-size='19' font-weight='600' letter-spacing='2.5' fill='#D6CEF8'>{{episodeTag}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 208,
      "width": 8,
      "height": 268,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='8' height='268' viewBox='0 0 8 268' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='6' height='268' rx='3' fill='{{accent}}'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 118,
      "y": 196,
      "width": 720,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Instrument Serif"
      },
      "html": "<div style='font-size:74px; font-weight:400; font-style:italic; line-height:1.02; letter-spacing:-0.01em; color:#F3F0FA;'>&#8220;{{quoteA}} <span style='color:{{accent}};'>{{quoteB}}</span> {{quoteC}}&#8221;</div>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 606,
      "width": 72,
      "height": 72,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='pg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#8B7CF6'/><stop offset='1' stop-color='#B9A9FF'/></linearGradient></defs><circle cx='36' cy='36' r='34' fill='url(#pg)'/><path d='M29 23 L52 36 L29 49 Z' fill='#0C0A14'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 170,
      "y": 612,
      "width": 560,
      "anchor": "top-left",
      "track": 6,
      "style": {
        "fontFamily": "Space Grotesk"
      },
      "html": "<div style='font-size:27px; font-weight:700; color:#F3F0FA;'>{{host}}</div><div style='margin-top:3px; font-size:20px; font-weight:500; color:#9A92B4;'>{{role}}</div>"
    },
    {
      "type": "SVG",
      "x": 1044,
      "y": 620,
      "width": 156,
      "height": 46,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='156' height='46' viewBox='0 0 156 46' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='156' height='46' rx='23' fill='#FFFFFF' fill-opacity='0.06' stroke='#FFFFFF' stroke-opacity='0.14' stroke-width='1'/><circle cx='26' cy='23' r='9' fill='none' stroke='{{accent}}' stroke-width='2'/><path d='M26 18 L26 23 L30 26' fill='none' stroke='{{accent}}' stroke-width='2' stroke-linecap='round'/><text x='48' y='30' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' letter-spacing='1.5' fill='#D6CEF8'>{{duration}}</text></svg>"
    }
  ]
}

More Video thumbnails templates

View all ↗

Ready to ship video at scale?

Start free — your first render is only a JSON payload away.