Dynamic Images from Contentful Content

Build your image layout in Wafrow's visual editor. Add text layers for entry title, author name, or category tag — and image layers for featured photos or brand logos. Every layer maps to a URL parameter your code will supply.

In your Next.js, Remix, or Gatsby frontend, build the Wafrow image URL using values from the Contentful Delivery API response. Pass entry fields as query parameters to produce a unique image URL per entry.

Use the URL directly as an og:image or email banner — Wafrow renders lazily at request time and caches the result. Alternatively, trigger the Wafrow API from a Contentful publish webhook to pre-render and store the image alongside your content.

Construct the Wafrow URL from Contentful entry fields in your frontend code and embed it directly as an og:image or img src. Nothing is generated until a visitor or crawler requests the URL — then Wafrow renders and caches the image automatically.

const entry = await client.getEntry('ENTRY_ID');

const url = new URL(
  'https://wafrow.com/i/TEMPLATE_ID'
);
url.searchParams.set('title[text]',    entry.fields.title);
url.searchParams.set('author[text]',   entry.fields.author);
url.searchParams.set('category[text]', entry.fields.category);

// embed as og:image or <img src>
const ogImage = url.toString();

Trigger the Wafrow API from a Contentful publish webhook. The image is rendered immediately and the binary is returned — store it in Contentful as a media asset or write the URL back to an entry field. By the time a visitor arrives, the image is already cached.

// Contentful publish webhook → Next.js API route
export async function POST(req) {
  const entry = await req.json();
  const res = await fetch(
    'https://wafrow.com/api/img/TEMPLATE_ID',
    {
      method: 'POST',
      headers: { Authorization: 'Bearer YOUR_TOKEN' },
      body: JSON.stringify({
        personalize: {
          title:    { text: entry.fields.title },
          author:   { text: entry.fields.author },
          category: { text: entry.fields.category },
        },
      }),
    }
  );
  // store res (image blob) or its URL back in Contentful
}