How can I automate the upload and updates of image resources on a Webflow collection item from an Airtable base?
TL;DR
- Connect Airtable and Webflow using Make (Integromat), ensuring Airtable has image fields with public URLs and Webflow has a matching CMS Collection.
- Use Make to watch Airtable records, optionally re-host images if necessary, and sync data to Webflow using its CMS API, scheduling and monitoring the automation as needed.
To automate image uploads and updates in Webflow from an Airtable base, you need to connect Airtable and Webflow using an integration platform that supports images, such as Make (formerly Integromat).
1. Prepare Your Airtable Base
- Include a field of type "Attachment" where images are uploaded. This should contain direct image URLs.
- Each record should also include fields for any other data you want to push to Webflow (e.g., title, slug, description).
2. Set Up Webflow CMS Collection
- In Webflow, create a CMS Collection with image fields (type: Image) that match your Airtable structure.
- Publish your Webflow site so the API can access the live CMS structure.
3. Generate Webflow API Credentials
- Go to Webflow Dashboard > Account Settings > Integrations tab.
- Under API Access, create a new API token and copy it.
- Get your Site ID and the Collection ID for the target CMS collection (use Webflow's CMS API docs or Make’s Webflow modules to fetch them).
4. Set Up a Make (Integromat) Scenario
- Create a new Make scenario with the following steps:
- Airtable trigger: Use the "Watch Records" module to monitor your table for new/updated records. Filter by “Last Modified Time” field to update only changed entries.
- HTTP module (optional): If image URLs from Airtable are private or expiring, use an HTTP module to download and re-upload the image to a permanent hosting service (e.g., Cloudinary). Webflow does not host external images directly.
- Webflow module: Use the “Create/Update Item” module for your CMS Collection.
- Map Airtable fields to the respective Webflow Collection fields.
- For image fields, use a publicly accessible image URL—Webflow requires this to upload images via API.
5. Handle Image Requirements
- Webflow expects image fields to receive URLs that point to actual image assets (e.g., ending in
.jpg,.png). - If Airtable images aren't accessible publicly, they must be downloaded and re-uploaded to an image host with a permanent, public URL.
- Alternatively, in Make, use the “Upload a File” Webflow API endpoint via an HTTP request to store the image, then use the returned URL in your CMS item.
6. Schedule and Monitor the Sync
- Set scenario to run on a schedule (e.g., hourly, daily) or trigger it manually.
- Make allows you to log errors and set up notifications so you can troubleshoot issues.
Summary
To automate image uploads from Airtable to Webflow, connect both platforms using Make. Ensure image URLs from Airtable are public and direct. Make will pull records, handle any image re-hosting if needed, and push updates to your Webflow Collection via the CMS API.
