Back to Integrations

Webflow Integration

CMS

Dynamic image processing for Webflow

Webflow CMS Integration

Process CMS Collection Images
// Webflow CMS Image Processing
const Webflow = require('webflow-api');

const webflow = new Webflow({ token: 'YOUR_WEBFLOW_API_TOKEN' });

async function enhanceCollectionImages(collectionId) {
  const items = await webflow.items({ collectionId });
  
  for (const item of items) {
    // Skip if no image field
    if (!item['main-image']) continue;
    
    const imageUrl = item['main-image'].url;
    
    // Enhance with ButterflyAPI
    const enhanced = await fetch('https://butterflyapi.com/api/v1/run', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer YOUR_BUTTERFLY_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        api: 'image-enhance',
        input: { image_url: imageUrl, scale: 2 }
      })
    }).then(r => r.json());
    
    // Update CMS item
    await webflow.updateItem({
      collectionId,
      itemId: item._id,
      fields: {
        'enhanced-image': enhanced.output.image_url,
        _archived: false,
        _draft: false
      }
    });
  }
  
  // Publish changes
  await webflow.publishSite({ siteId: 'YOUR_WEBFLOW_SITE_ID' });
}