A share image for every story, made from the story.

# 1. Copy the news article starter into your account; its id is your template
curl -s https://api.imageapis.com/v1/starters/news-article -H 'X-API-Key: YOUR_KEY' | jq .template > card.json
curl -X POST https://api.imageapis.com/v1/templates -H 'X-API-Key: YOUR_KEY' \
  -H 'Content-Type: application/json' -d @card.json
# → { "id": "tpl_…", "object": "template", … }

# 2. A signed base that can render that template and nothing else
curl -X POST https://api.imageapis.com/v1/signed-bases -H 'X-API-Key: YOUR_KEY' \
  -H 'Content-Type: application/json' -d '{"name":"article cards","template":"tpl_…"}'
# → { "id": "sb_…", "secret": "sbs_…", … }

# Keep them where your code can read them: OG_TEMPLATE=tpl_…  OG_BASE=sb_…  OG_SECRET=sbs_…

<?php
// functions.php or a small plugin; in wp-config.php:
//   define('OG_TEMPLATE', 'tpl_…'); define('OG_BASE', 'sb_…'); define('OG_SECRET', 'sbs_…');

function imageapis_card_url(WP_Post $post): string {
    $plain = fn ($s) => html_entity_decode($s, ENT_QUOTES | ENT_HTML5, 'UTF-8');   // WordPress stores &amp; and &#8217;
    $cats  = get_the_category($post->ID);
    $query = http_build_query([
        'publication' => $plain(get_bloginfo('name')),
        'section'     => $cats ? $plain($cats[0]->name) : 'News',
        'title'       => $plain(get_the_title($post)),
        'author'      => $plain(get_the_author_meta('display_name', $post->post_author)),
        'date'        => get_the_date('j F Y', $post),
        'photo'       => get_the_post_thumbnail_url($post, 'large') ?: 'https://example.com/default-photo.jpg',
    ]);
    $msg = '/s/' . OG_BASE . '/' . OG_TEMPLATE . '.png?' . $query;
    return 'https://img.imageapis.com' . $msg . '&sig=' . hash_hmac('sha256', $msg, OG_SECRET);
}

add_action('wp_head', function () {
    if (!is_singular('post')) return;
    $url = esc_url(imageapis_card_url(get_post()));
    echo "<meta property=\"og:image\" content=\"$url\">\n";
    echo "<meta property=\"og:image:width\" content=\"1200\">\n<meta property=\"og:image:height\" content=\"630\">\n";
    echo "<meta name=\"twitter:card\" content=\"summary_large_image\">\n<meta name=\"twitter:image\" content=\"$url\">\n";
});

// Yoast SEO already prints og:image? Swap its URL instead of printing a second tag:
// add_filter('wpseo_opengraph_image', fn ($img) => is_singular('post') ? imageapis_card_url(get_post()) : $img);

// app/news/[slug]/page.tsx
import { createHmac } from "node:crypto";

function cardUrl(story: Story) {
  const query = new URLSearchParams({
    publication: "The Daily Example",
    section: story.section,
    title: story.headline,
    author: story.byline,
    date: new Date(story.publishedAt).toLocaleDateString("en-GB", { dateStyle: "long" }),
    photo: story.leadPhoto,
  }).toString();
  const path = `/s/${process.env.OG_BASE}/${process.env.OG_TEMPLATE}.png`;
  const sig = createHmac("sha256", process.env.OG_SECRET!).update(`${path}?${query}`).digest("hex");
  return `https://img.imageapis.com${path}?${query}&sig=${sig}`;
}

export async function generateMetadata({ params }) {
  const story = await getStory((await params).slug);
  const image = cardUrl(story);
  return {
    title: story.headline,
    openGraph: { images: [{ url: image, width: 1200, height: 630 }] },
    twitter: { card: "summary_large_image", images: [image] },
  };
}

// Ghost Admin → Settings → Integrations → a custom integration → webhook on "Post published" → here
import { createHmac } from "node:crypto";
import GhostAdminAPI from "@tryghost/admin-api";

const ghost = new GhostAdminAPI({ url: "https://news.example.com", key: process.env.GHOST_ADMIN_KEY, version: "v6.0" });

function cardUrl(vars) {
  const query = new URLSearchParams(vars).toString();
  const path = `/s/${process.env.OG_BASE}/${process.env.OG_TEMPLATE}.png`;
  const sig = createHmac("sha256", process.env.OG_SECRET).update(`${path}?${query}`).digest("hex");
  return `https://img.imageapis.com${path}?${query}&sig=${sig}`;
}

export async function POST(req) {
  const post = (await req.json()).post.current;
  const url = cardUrl({
    publication: "The Daily Example",
    section: post.primary_tag?.name ?? "News",
    title: post.title,
    author: post.primary_author?.name ?? "",
    date: new Date(post.published_at).toLocaleDateString("en-GB", { dateStyle: "long" }),
    photo: post.feature_image ?? "https://news.example.com/default-photo.jpg",
  });
  // nothing renders here: the card is drawn on its first fetch. updated_at stops this overwriting a newer edit.
  await ghost.posts.edit({ id: post.id, updated_at: post.updated_at, og_image: url, twitter_image: url });
  return new Response("ok");
}

# stories.csv: a column per {{placeholder}}; a column starting with _ comes back as metadata
publication,section,title,author,date,photo,_story
The Daily Example,Climate,The tide gauges were right. The flood maps were not.,Priya Natarajan,12 October 2026,https://news.example.com/img/coast.jpg,4812
The Daily Example,City,The pier reopens,Sam Okafor,11 October 2026,https://news.example.com/img/pier.jpg,4807

curl -X POST "https://api.imageapis.com/v1/collections?template=tpl_…&webhook_url=https://news.example.com/hooks/cards" \
  -H 'X-API-Key: YOUR_KEY' -H 'Content-Type: text/csv' --data-binary @stories.csv
# → 202 { "id": "col_…", "status": "pending", "images": [
#          { "index": 0, "id": "img_…", "url": "https://img.imageapis.com/i/img_….png", "metadata": { "story": "4812" } }, … ] }