Orshot Blog Images: featured images, OG images and in-article images for every post

Give this skill a blog post (a draft, a file or a URL). It returns a cover image and 3 to 6 images that sit inside the article, all on the user's brand, as PNG files ready to drop into the post.

Image models draw pictures; they cannot be trusted with words, numbers, logos or a layout that matches the last 40 posts. Blog images are mostly words, numbers and logos. So this skill designs templates once and renders them per post with Orshot: the text is real text, the logos are real logos, and post 41 looks like post 1.

• No API key over the hosted MCP server or the Orshot WordPress plugin. Both sign in with OAuth.
• The credit cost comes first. Say it before rendering more than 10 pages.
• Nothing goes live without a yes. Ask before publishing a post or setting a cover on a live one.

This skill or another?

Example prompts

• "Make a featured image for this post: https://blog.fernleafcoffee.com/cold-brew-ratio"
• "Every time we publish on our Ghost blog, set an OG image with the post title. Build it in n8n."
• "Our WordPress site has 140 posts with no featured image. Make covers for all of them in our brand colors, and show me five before you do the rest."
• "The Tallyhop docs run on Next.js. Give every page its own OG image in the same style as the blog."
• "This post compares three payroll tools. Make the cover and an in-article image for the comparison table."
• "We changed our brand color to green. Re-render every cover and keep the file names."

What you get per post

Setup

1. Connect the Orshot MCP server at https://mcp.orshot.com/full (OAuth in the browser, no key). Setup per client: https://orshot.com/docs/integrations/mcp-server.md. Headless or scheduled jobs use REST with ORSHOT_API_KEY (example below). The orshot skill covers both.
2. Get the brand: orshot_get_brand_kit. If it is empty and the user has a website, orshot_scan_brand_website with their URL, then use the colors, fonts and logo it finds. Ask before importing anything into their brand kit.
3. orshot_plan_design with the brief, job: "blog cover image for <the post>", the size and on_brand: true, once per template set: it returns the plan (palette, fonts, type scale) and a layout. Read orshot_get_design_spec topic template-json once per session; it is the template JSON reference, also at https://orshot.com/docs/definitions/template-json.md. Load the orshot-design skill for design craft beyond the style guide here.

Step 1. Read the post and plan the images

• Find the keyword: the 1 to 3 words a reader searched for. It goes in the colored chip on the cover.
• Pick the cover style (all six are in one template, see Step 3):

• Plan the in-article images: one right after paragraph 1 or 2 that answers the post's question at a glance, then one per main section. Skip a section when an image would only repeat its heading. Each one must show something real (see the style guide).

Pick a layout per image from references/blueprints/:

references/blueprints.md lists every blueprint's dynamic fields.

Step 2. Fit the blueprints to the brand

The blueprints use one accent family. Swap it for the brand's primary color everywhere it appears:

Keep the inks (#141414, #4A4A48, #6B6A66) and the warm greys. Fonts: Fraunces for headlines and Inter for body work for most brands; swap to the brand kit fonts if the brand has a display font. Logos of other tools: https://cdn.simpleicons.org/<name>/<hex> or the favicon URL https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://<domain>&size=256.

Step 3. The cover: one template, made once, rendered per post

1. orshot_list_studio_templates with search Blog Cover System. Found it? Skip to 3. One system per brand or blog: a workspace with two blogs gets Blog Cover System (<brand>) for each.
2. Create it once: orshot_create_template_design named Blog Cover System, pages_data = the six cover-*.json blueprints in the order of the table above, brand swaps from Step 2 applied, includeThumbnails: true. Look at the six thumbnails. Fix real problems with one orshot_update_template_design call.
3. Render one page per post. REST body below; over MCP, orshot_render_template takes the same modifications with format, scale, includePages and extraSizes as top-level arguments.

{
  "templateId": 123,
  "modifications": {
    "page1@overline": "<span style=\"background-color:#E6EAFE;border-radius:999px;padding:6px 14px\">Guides</span>",
    "page1@title_line_1": "How to Send <span style=\"background-color:#E6EAFE;border-radius:12px;padding:0px 12px;font-family:Fraunces;font-style:italic;font-weight:800;color:#2B3FC4\">Invoices</span>",
    "page1@title_line_2": "Automatically from Stripe",
    "page1@logo_1": "https://cdn.simpleicons.org/stripe/635BFF",
    "page1@logo_2": "https://cdn.simpleicons.org/gmail/EA4335",
    "page1@logo_3": "https://cdn.simpleicons.org/googlesheets/34A853",
    "page1@logo_4": "https://cdn.simpleicons.org/zapier/FF4F00"
  },
  "response": { "type": "url", "format": "png", "scale": 2, "includePages": [1] }
}

Title rules: line 1 holds the keyword chip, line 2 finishes the promise. 8 words or fewer in total. Fewer logos? Hide a slot with "page1@logo_4.opacity": "0" and "page1@tile_4.opacity": "0".

Want the cover for social too? For a wide size, add it to extraSizes (inside response over REST, a top-level argument over MCP). Smart Resize keeps the layout and scales it, so a tall pin, a square or a story leaves the cover small in empty space: add a page designed for that size to the template instead (full-bleed photo, large title). Presets and the response shape: https://orshot.com/docs/api-reference/render-from-studio-template.md#smart-resize.

Photo-led posts (recipes, travel, roundups of places): use the Product window or Prompt card with the post's photo, hide the tool tiles with .opacity: "0", and move the crop with <image layer>.objectPosition, such as "50% 85%".

Step 4. In-article images: one template per post

1. Write the copy for each planned image first: a two-line headline (line 2 is the takeaway, in the accent italic), the cards' text, and a footer line with the source and the month. 60 words or fewer per image.
2. Build the pages: start from each chosen blueprint, replace every text and image with the post's real content, keep the positions, and apply the Step 2 swaps. Delete cards you do not need and re-space the rest so no card is half empty. Rules in references/style-guide.md.
3. orshot_create_template_design named Blog: <post slug> images, all pages in one call, includeThumbnails: true.
4. Look at every thumbnail. Check: nothing overlaps, nothing wraps badly, no text under 14px, at least one real visual per image. Fix with one orshot_update_template_design (page_operations) call.

Step 5. Render and save

• orshot_render_template, PNG, scale: 2. Over MCP, one call renders every page; the result has one URL per page.
• Look at each render before saving it. Re-render rather than ship an overlap.
• Save next to the post: <images dir>/<post-slug>/<name>.png (in-article) and <images dir>/<post-slug>.png (cover). Use the blog's own folder (public/blog/ in Next.js, the media library in WordPress, content/images/ in Ghost).
• Optional, smaller files: cwebp -q 85 in.png -o out.webp for in-article images; covers stay PNG for social previews (resize to 1600 wide and compress to about 250 KB).
• Write alt text that names what the image shows: "Three cards comparing Stripe, Paddle and Lemon Squeezy fees at 1,000 sales a month".
• Put the cover in the post's frontmatter (image, cover, featured_image or og:image, whatever the blog uses) and each in-article image right after the paragraph it belongs to.

Automate it: one cover per new post

The cover template has dynamic fields, so any job can render it. Pick the road by where the blog lives. Each docs path opens as https://orshot.com/docs/<path>.md.

The REST road, from a CMS webhook, n8n, Make or Zapier:

curl -s -X POST https://api.orshot.com/v1/studio/render \
  -H "Authorization: Bearer $ORSHOT_API_KEY" -H "Content-Type: application/json" \
  -d '{
    "templateId": 123,
    "modifications": {
      "page1@title_line_1": "How to Send <span style=\"...\">Invoices</span>",
      "page1@title_line_2": "Automatically from Stripe"
    },
    "response": { "type": "url", "format": "png", "includePages": [1] }
  }'

The response holds the image URL. Credits per render: https://orshot.com/docs/definitions/credits-usage.md. Then:

1. Upload before you set the cover. WordPress takes a media id, not a URL, for the featured image: upload the PNG to the Media Library (POST /wp-json/wp/v2/media), then set the post's featured_media to the id it returns. Ghost's n8n node does not take an external image URL as the feature image: upload the PNG with Ghost's Admin API image upload, then set feature_image to the URL Ghost returns.
2. One render per post. Fire only when the post has no featured image yet, so a hand-made cover is never replaced. Write the URL or media id back to the post right away, so a retried webhook does not render twice. The pattern: "Run once per item" in the orshot skill's references/recurring-automation.md.
3. Review before it goes live. For a fully automated blog, set the cover while the post is still a draft and send the user the image URL. Publish only after a yes.

Backfill: covers for old posts

1. List the posts that have no featured image (the WordPress or Ghost API, the Webflow collection, or MDX files with no cover field). Tell the user the count and what the run costs in credits.
2. Render the first 3 to 5, show them, and wait for a yes.
3. Render the rest: orshot_batch_render_template over MCP, or one REST call per post. Batch options: the Rendering section of https://orshot.com/docs/integrations/mcp-server.md.
4. Upload and set each cover as in the REST road above. Never replace an existing featured image without asking.

On Webflow, the preset "Backfill Open Graph images across a Webflow collection" does this in one workflow.

An OG image per page with a dynamic URL

For Next.js, Astro or Lovable sites that want one OG image per page or per route, without a render step at publish:

1. orshot_create_dynamic_url with the cover template's templateId. It returns a signed URL that renders on request. Every render it makes spends credits, so set a cache window and a render cap when you create it.
2. Set the page's og:image (and twitter:image) to that URL with the page title as a URL-encoded query parameter. In Next.js that is generateMetadata; in Astro, the layout's <head>.
3. The Blog Cover System has six pages: add page=<n> and prefix the keys with page<n>@. Send plain title text; the keyword chip <span> belongs to the REST road.
4. Link previews read the HTML the server sends and do not run JavaScript. The tag must be in that HTML.

URL format, signing and limits: https://orshot.com/docs/integrations/dynamic-urls.md

Keep images current

When a number in the post changes, edit that page of the post's Blog: <slug> images template and re-render it to the same file name, so images never go stale.

When the brand changes, apply the new colors to the Blog Cover System once (the Step 2 swaps), say what re-rendering every cover costs, then re-render each one to the same file name.

Gotchas

1. The keyword chip is a <span style="background-color:..."> inside the title's content, so it moves with the words. Standalone pills are a shape behind the text.
2. Card shadows on shapes use the dropShadow* style keys, as the blueprints do. The renderer draws boxShadow* only on image and video layers.
3. Title lines with <span> tags are rich text, where \n is not converted. Use <br> there; plain text takes \n. Line-break and other field rules: https://orshot.com/docs/definitions/template-json.md.
4. Multi-page keys need the pageN@ prefix: gotcha 2 in the orshot skill. A bare style key (logo_4.opacity) applies to every page that has that layer. Details: https://orshot.com/docs/image-generation/multi-page-images.md.
5. Small layout fixes do not need a full update. orshot_patch_template_elements with layer_operations adds, edits, moves or deletes any layer by element_id. Whole pages go through orshot_update_template_design with page_operations. Ids come back in the pageMap of the create or update result.
6. Never put a credit line or watermark on the images.
7. Do not create a new cover template per post. Reuse the one Blog Cover System template.

Safety

• Ask before importing a website into the brand kit, and before overwriting existing image files.
• Ask before publishing a post, or setting or replacing the featured image of a live post.
• Say how many credits a run costs before rendering more than 10 pages.
• Use only logos and screenshots the post is actually about.

Related skills: orshot (connection, REST, render options), orshot-design (design craft), orshot-carousel (turn the post into a carousel), orshot-social-media-scheduler (post the cover to LinkedIn and X).