Webflow + Image API: Auto-Generate CMS Images

Webflow's CMS is powerful. You can store thousands of blog posts, products, or portfolio items. But every item needs images. Featured images, social previews, product cards.

Creating those manually defeats the purpose of a dynamic CMS. If you're uploading custom images for each item, you've just added hours of work to every content update.

Here's how to automate it. Connect an image API to your Webflow CMS, and images generate themselves whenever you add or update content.

Why automate webflow imagesWhy Automate Webflow Images?

The math is simple. Say you publish 10 blog posts per month. Each needs:

• A featured image (blog listing)
• An OG image (social sharing)
• Maybe a Pinterest image (different dimensions)

That's 30 images per month. At 10 minutes each in Canva, you're burning 5 hours monthly on repetitive design work.

With automation? Zero hours. The images create themselves from your CMS data. For a step-by-step intro, see our beginner guide to generating images with an API.

What you can automate:

Same pattern every time: CMS data becomes visual content.

The architectureThe Architecture

Webflow doesn't have built-in automation, so we need a bridge. The typical setup:

Webflow CMS → Zapier/Make.com → Image API → Storage → Back to Webflow

Here's what each piece does:

1. Webflow CMS - Stores your content and triggers updates
2. Zapier/Make.com - Listens for changes, orchestrates the flow
3. Imejis.io - Generates images from templates
4. Storage (optional) - Cloudinary, S3, or direct Webflow upload
5. Webflow CMS - Receives the generated image URL

Let's build this step by step.

Method 1 zapier integration easiestMethod 1: Zapier Integration (Easiest)

This is the quickest path for most Webflow users.

Step 1 prepare your webflow cmsStep 1: Prepare Your Webflow CMS

Your collection needs fields for the data that goes into images, plus a field for the generated image URL:

Add the "OG Image URL" field as plain text because Zapier will write a URL here, not upload a file directly.

Step 2 create the zapStep 2: Create the Zap

Trigger: Webflow - New CMS Item

Configure:

• Select your Webflow site
• Select the collection (e.g., "Blog Posts")

Action: HTTP Request (Webhooks by Zapier)

Configure:

• Method: POST
• URL: https://render.imejis.io/v1/YOUR_TEMPLATE_ID?delivery=hosted
• Headers:
  • dma-api-key: YOUR_API_KEY
  • Content-Type: application/json
• Data: Raw
• Body:

{
  "headline.text": "{{title}}",
  "category.text": "{{category}}"
}

With ?delivery=hosted on the URL, Imejis stores the rendered image and returns a JSON body with a public url field, so you can skip a separate upload step entirely. (If you want a private, expiring link instead, use ?delivery=signed&expiresIn=60 for a URL that lasts 60 minutes. Without a delivery parameter the endpoint streams the raw image bytes back, which is when you'd need the manual upload step below.)

Action: Webflow - Update CMS Item

Configure:

• Select your site and collection
• Item ID from trigger
• Set "OG Image URL" to the url from the render response

Alternative: upload to your own storage (optional)

If you'd rather host the image behind your own CDN, drop the ?delivery=hosted parameter so the endpoint returns the raw image, then add an "Upload to Cloudinary" (or S3) action:

• Connect your Cloudinary account
• Set file input to the response from the render step
• Use the returned Cloudinary URL for "OG Image URL" instead

Now every new blog post gets its OG image automatically. For more on this pattern, see generate OG images dynamically.

Step 3 handle updatesStep 3: Handle Updates

Create a second Zap for "Updated CMS Item" if you want images to regenerate when content changes. Same flow, just different trigger.

Method 2 makecom with advanced logicMethod 2: Make.com with Advanced Logic

Make.com lets you add conditional logic, like using different templates for different categories.

The scenarioThe Scenario

[Webflow Trigger] → [Router] → [Category = News] → [News Template]
                           └→ [Category = Tutorial] → [Tutorial Template]
                           └→ [Default] → [Standard Template]
                    → [Upload] → [Update Webflow]

Setting up the routerSetting Up the Router

1. Add a Webflow "Watch Events" module
2. Add a Router module
3. Create filters for each category
4. Each branch calls a different Imejis.io template
5. Merge results and upload to storage
6. Update Webflow with the image URL

This way, tutorials get a code-focused design while news posts get a headline-focused one. Same automation, different outputs.

Method 3 custom code most controlMethod 3: Custom Code (Most Control)

For developers who want direct control, use Webflow's API with a serverless function.

The webhook approachThe Webhook Approach

1. Set up a webhook in Webflow (Settings > Integrations > Webhooks)
2. Trigger: "Collection Item Created" and "Collection Item Updated"
3. Point to your serverless function

Serverless function vercelnetlifyServerless Function (Vercel/Netlify)

// api/generate-webflow-image.js
import { WebflowClient } from "webflow-api"
 
const webflow = new WebflowClient({
  accessToken: process.env.WEBFLOW_API_KEY,
})
 
export default async function handler(req, res) {
  const { payload } = req.body
  const { _id, title, category, slug } = payload
 
  // Generate image from template. ?delivery=hosted makes Imejis store the
  // render and return a JSON body with a public URL, so no upload step is needed.
  const imageResponse = await fetch(
    `https://render.imejis.io/v1/${process.env.IMEJIS_TEMPLATE_ID}?delivery=hosted`,
    {
      method: "POST",
      headers: {
        "dma-api-key": process.env.IMEJIS_API_KEY,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        "headline.text": title,
        "category.text": category,
      }),
    }
  )
 
  // delivery=hosted returns { url: "https://..." } pointing at the stored image.
  // (Use ?delivery=signed&expiresIn=60 instead if you want a private, expiring link.)
  const { url: imageUrl } = await imageResponse.json()
 
  // Update Webflow CMS item
  await webflow.collections.items.updateItem(
    process.env.WEBFLOW_COLLECTION_ID,
    _id,
    {
      fields: {
        "og-image-url": imageUrl,
      },
    }
  )
 
  res.status(200).json({ success: true, imageUrl })
}

If you'd rather keep the image on your own CDN, drop ?delivery=hosted, read the response as await imageResponse.arrayBuffer(), and upload those bytes to Cloudinary or S3 before writing their URL back to Webflow.

Benefits of custom codeBenefits of Custom Code

• No monthly Zapier/Make.com fees
• Faster execution (no automation platform overhead)
• Full control over error handling
• Can batch process existing items

Template design for webflowTemplate Design for Webflow

Your image templates should match your site's design system.

Blog featured imagesBlog Featured Images

Keep it simple. The headline is the star.

Product cardsProduct Cards

Pull the product image URL from your CMS to composite onto the template.

Social og imagesSocial OG Images

Design for Twitter and Facebook's preview cards. These dimensions work everywhere.

Connecting og images to webflowConnecting OG Images to Webflow

Once you have the image URL, connect it to your site's meta tags.

In webflows page settingsIn Webflow's Page Settings

For individual CMS pages, you can't dynamically set OG images in the built-in settings. Instead:

1. Add a custom code embed in your CMS template page's <head>
2. Reference your OG Image URL field:

<meta
  property="og:image"
  content='{{wf {"path":"og-image-url","type":"PlainText"} }}'
/>

This pulls the generated image URL into your OG meta tag for each item.

Testing og imagesTesting OG Images

After publishing, test with:

• Facebook Sharing Debugger
• Twitter/X: Post a link in a draft tweet to preview the card (the standalone Card Validator was discontinued)
• LinkedIn Post Inspector

These tools show exactly what your shared links will look like.

Bulk processing existing contentBulk Processing Existing Content

Already have 100 blog posts without generated images? Process them in batch.

Using webflows apiUsing Webflow's API

const processExistingPosts = async () => {
  // Get all items from collection
  const items = await webflow.collections.items.listItems(COLLECTION_ID, {
    limit: 100,
  })
 
  for (const item of items.items) {
    // Skip if already has OG image
    if (item.fieldData["og-image-url"]) continue
 
    // Generate image
    const imageResponse = await fetch(/* ... */)
 
    // Upload and update
    // ... same as webhook handler
 
    // Rate limit: wait between requests
    await new Promise((r) => setTimeout(r, 1000))
  }
}

Run this once to backfill, then let the webhook handle new items.

Cost analysisCost Analysis

Running automated Webflow images:

For custom code approach:

Compare to hiring a designer or spending your own time. At 10 posts/month, you're paying $1.50-4.50 per image versus $20+ of your time.

Check Imejis.io pricing for volume options. Pricing reflects published rates as of July 2026; check the provider's site for current plans.

Troubleshooting common issuesTroubleshooting Common Issues

Images not appearing in webflowImages Not Appearing in Webflow

Check:

• Is the URL field updating correctly?
• Is the URL accessible (not blocked)?
• Did you publish changes after the update?

Fix: Webflow requires publishing for CMS changes to appear on the live site.

Og images not showing on socialOG Images Not Showing on Social

Check:

• Is the meta tag correctly outputting the URL?
• Is the image publicly accessible?
• Have you cleared the platform's cache?

Fix: Use the debugging tools mentioned above to force a cache refresh.

Webhook not firingWebhook Not Firing

Check:

• Is the webhook enabled in Webflow settings?
• Is your endpoint accessible (not localhost)?
• Are there errors in your function logs?

Fix: Test with a simple endpoint first (like webhook.site) to confirm Webflow is sending data.

Getting startedGetting Started

Here's your path:

1. Add fields to your CMS for the generated image URL
2. Create a template in Imejis.io matching your design
3. Set up Zapier or Make.com to connect the pieces
4. Test with one CMS item before processing everything
5. Add the OG meta tag to your CMS template
6. Process existing content with a batch script

Start with one collection (blog posts are usually easiest). Get that working perfectly, then expand to products, team members, or other content types.

If you're exploring similar integrations for other platforms, see our guides for WordPress image automation and headless CMS image automation. For a deeper understanding of the technology, read what is an image API.

Your Webflow site already has great content. Now give it great images to match, without the manual work.

Start generating images free with Imejis.io