Webflow + Image API: Generate Dynamic CMS Images Automatically

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.

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
• Headers:
  • Authorization: Bearer YOUR_API_KEY
  • Content-Type: application/json
• Data: Raw
• Body:

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

The API returns the image directly as binary data.

Action: Upload to Cloudinary (or your storage)

Since Imejis.io returns the image binary, upload it to a CDN:

• Connect your Cloudinary account
• Set file input to the response from previous step
• Note the returned URL

Action: Webflow - Update CMS Item

Configure:

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

Now every new blog post gets its OG image automatically.

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
  const imageResponse = await fetch(
    `https://render.imejis.io/v1/${process.env.IMEJIS_TEMPLATE_ID}`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.IMEJIS_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        headline: title,
        category: category,
      }),
    }
  )
 
  // Image returns directly - upload to Cloudinary
  const imageBuffer = await imageResponse.arrayBuffer()
 
  const cloudinaryResponse = await fetch(
    `https://api.cloudinary.com/v1_1/${process.env.CLOUDINARY_CLOUD}/image/upload`,
    {
      method: "POST",
      body: createFormData(imageBuffer, `blog-${slug}.png`),
    }
  )
 
  const { secure_url } = await cloudinaryResponse.json()
 
  // Update Webflow CMS item
  await webflow.collections.items.updateItem(
    process.env.WEBFLOW_COLLECTION_ID,
    _id,
    {
      fields: {
        "og-image-url": secure_url,
      },
    }
  )
 
  res.status(200).json({ success: true, imageUrl: secure_url })
}

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 Card Validator
• 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.

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.

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

FaqFAQ

Can i upload generated images directly to webflows asset managerCan I upload generated images directly to Webflow's asset manager?

Not directly through Zapier. Webflow's API has limited image upload support. The workaround is storing images on Cloudinary or S3 and using the URL in a text field, which works just as well for display purposes.

Will this slow down my webflow siteWill this slow down my Webflow site?

No. The images are generated once and stored. Your site loads them like any other image. There's no runtime generation happening on page load.

How do i handle different image sizes for different templatesHow do I handle different image sizes for different templates?

Create multiple templates in Imejis.io (square for Instagram, landscape for Twitter, etc.). In your automation, either generate all sizes or use a Router to pick the right template based on the destination.

What happens if the image generation failsWhat happens if the image generation fails?

Your automation should include error handling. In Zapier, enable error notifications. In custom code, log failures and send alerts. Don't leave broken images unnoticed.

Can i regenerate images when i update cms contentCan I regenerate images when I update CMS content?

Yes. Set up a separate automation triggered by "CMS Item Updated" in addition to "CMS Item Created." This way, changing a headline regenerates the image with the new text.