Webflow Integration
CMSDynamic 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' });
}