How can I automate the upload and updates of image resources on a Webflow collection item from an Airtable base?
- Use Make.com to trigger from Airtable, download the image via its public URL as binary, and upload it to Webflow CMS using the image field.
- Ensure Airtable has direct image URLs and Webflow has a matching Image field; track Webflow Item IDs or use unique fields to match records for updates.
To automate image uploads and updates to Webflow CMS collection items from an Airtable base, you need an integration workflow that handles images properly, as Webflow requires image assets to be uploaded via a hosted URL. Here's how you can set it up:
1. Prepare Your Airtable Base
- Include a field with image attachments in your Airtable table (e.g., "Main Image" field).
- Airtable stores uploaded images with a public CDN URL which you can use to upload to Webflow.
- Make sure the image field is not empty and the URLs point directly to the image, not a page.
2. Set Up Webflow CMS
- Ensure your Webflow collection has an Image field (not a plain URL field).
- Create other necessary fields (e.g., Name, Description) that match your Airtable base.
3. Use a No-Code Integration Tool (e.g., Make.com or Zapier)
Use Make (Integromat) for more detailed file handling, as Zapier has limited support for file uploads.
Steps in Make:
Trigger: Airtable → Watch Records
Set it to watch new/updated records.
Ensure the Image field outputs the full URL(s), e.g.,
attachments[0].url.HTTP Module: Get Image URL
Add an HTTP module to download the image binary using the URL in the Airtable record.
Set the Output as Binary and provide a suitable filename.
Webflow Module: Create/Update Item in Webflow CMS
Use either Create Live Item or Update Live Item.
For the image field in Webflow, set the Webflow image field to the output of the downloaded binary file.
Update other fields (name, description, etc.) as required.
4. Match Airtable Records to Webflow Items
- To update a specific item in Webflow, you need to know its Item ID.
- You can:
- Store the Webflow Item ID back in Airtable after the first upload.
- Use filters based on unique fields (like slug or name) to find and update items.
5. Handle Image Replacements Properly
- Webflow treats image fields as new uploads when updated, so make sure:
- You’re uploading a file, not just sending a URL.
- You include file metadata (filename, MIME type) when using binary upload modules in Make.
Summary
To automate image uploads and updates from Airtable to Webflow, use Make.com to download the image from Airtable and upload it as binary to Webflow’s CMS. Ensure your Webflow collection has an Image field and that Airtable provides direct image URLs. Match items using a unique field or store the Webflow Item ID in Airtable.