Streaming live at 10am (PST)

Create a CMS item with Multi Image field in Integromat

Hi! It looks like Webflow expects an array of objects while updating a Multi Image field. Can’t find any examples in the API documentation. I have an array with URLs. So, what should I pass to the Multi Image field? Thank you in advance.

Pass your array with URLs.
“your-field-name”: [{“url”: “your-image-url-to-upload”}]

1 Like

Thank you! It works.

In case anyone needs to create a multi image field from an Airtable record with Integromat, I came up with the following solution:

When you create a Webflow CMS record, Integromat doesn’t allow to have a multiple attachments/images object. To achieve that, try to create a record without this object, and then patch this record at the next step with a multi-image object.

To do that:

  1. Create a field in Aitrtable, where you construct a JSON object of the following scheme from the multi image (attachments) field:

[{"url":"https://dl.airtable.com/.attachments/.../filename.jpg","alt":"Text"},{"url":"https://dl.airtable.com/.attachments/.../filename.jpg","alt":"Text"}]

Let’s name this field “Illustrations Webflow JSON”.

You can do that with a formula, but the easiest way is to run the following script every time you update multiple images field (to run the script you need to create an Automation):

let inputConfig = input.config();
let recordID = inputConfig.recordID;

let yourTable = base.getTable("Table name");

class URLHolder {
 constructor(url, alt) {
 this.url = url;
 this.alt = alt; // Airtable doesn't allow to add alt text, but you can use each illustration file name for that purpose
 }
}

// Query the table and find our record according to its id:
let rootQuery = await yourTable.selectRecordsAsync();
let record = rootQuery.getRecord(recordID);

let illustrations = record.getCellValue("Illustrations") // Where 'Illustrations" is your multi image field of the record

if (illustrations) {
 const illustrationsURLs = illustrations.map(illustration => new URLHolder(illustration.url, illustration.filename));
 productsTable.updateRecordAsync(recordID, {
 "Illustrations Webflow JSON": JSON.stringify(illustrationsURLs)
 });
} else {
 productsTable.updateRecordAsync(recordID, {
 "Illustrations Webflow JSON": null
 });
}
  1. After you create the Webflow record from this Airtable record in Integromat, you patch this record with the ‘Webflow Make an API Call’ Integromat module:

URL should be constructed from the previous Webflow module where you created/updated the record. For example, if it was the module number 20, you put the following string in the URL field: collections/{{20._cid}}/items/{{20._id}}

The method should be set to Patch.

The Headers should be set to
Key: Content-Type
Value: application/json

No Query String

Body:

{
    "fields": {
        "illustrations": {{1.`Illustrations Webflow JSON`}}
    }
}

Where illustrations is the Webflow CMS Collection field where you store multiple images,Illustrations Webflow JSON is the field of the Airtable record, that you get for example in the first module.

Good luck!

Hi @Chekanov,

I’m still stuck on this. Currently I have setup the images to be sent to Webflow’s “Multi Image” Field in the below format (image URL;imageURL):

https://dl.airtable.com/.attachments/0a594b435a4864aae78ae687eec45e4b/d5860c7e/BlueCircle-01.png;https://dl.airtable.com/.attachments/0a594b435a4864aae78ae687eec45e4b/d5860c7e/BlueCircle-01.png

I got this format by looking at how Webflow wants me to import multi images when I import a CSV manually. I’m using Integromat, Airtable (form + formatting) and Webflow.

Let me know how it should be, I have been stuck on this for more than a week now.

Thank you in advance!!

@Alex_Cheng No, this won’t work. Webflow should receive an array with image objects like:

[{"url":"https://dl.airtable.com/.attachments/.../filename.jpg","alt":"Text"},{"url":"https://dl.airtable.com/.attachments/.../filename.jpg","alt":"Text"}]

(“alt” is optional)

Hi @Chekanov !

Thanks for the quick reply. So it need to be like the below format:

[{“url”:"https://dl.airtable.com/.attachments/.../filename.jpg"},{“url”:"https://dl.airtable.com/.attachments/.../filename.jpg}]

and the only way to achieve it is using the JSON method as specified in your solution above?

What kind of Airtable field do I need to create? Like where do I input the JSON object? Do I need to install the JSON editor app from the marketplace?

Let me know. Thanks!

@Alex_Cheng , I tried everything as you did, and that’s the only solution that worked for me.

You don’t need the JSON app. You can use a formula field to create these image object arrays (I tried to write this formula, but it was easier to write the script) or a Single Line Text field with the automatic script I mentioned — every time the multiple-image field is changed I run this script and update the single-line text field.

Hi @Chekanov !

Thanks for your clarification. I will try your method using JSON. I never really used JSON in Airtable before (first itme using Airtable) so please forgive me if I’m asking elementary questions regarding this. I’m trying to follow your instructions in your post above and below is what I have thus far.

I created a Long Text column called “Illustrations Webflow JSON” and I renamed all my uploaded images to “illustrations”. I wasn’t able to input the JSON script into the new column itself, so I input it into a field under the column, is that correct? Am I on the right track?

Also does this script “automatically” run now or do I need to implement something else to make it automatically run?

Let me know! Thank you so much, it seems like only your post sheds any light regarding this topic on the entire internet O_O. Super grateful for your contribution :slight_smile:

Hi @Alex_Cheng! Unfortunately, it’s not the right track. You can run a script in Artable only thru automations — Automations overview – Airtable Support.

Hi @Chekanov,

Thanks for the quick feedback, I think I’m getting it now. Can you please give me some guidance for the below setup?

Let me know. Thank you so much!

Please go thru the Airtable Automation manual. You should understand how automations get data from a particular row. When you create an automation, there should be a record ID passed.

Please see below my setup screenshots. I hope they help to understand:






Hi @Chekanov !

Thank you so much. Currently I have another “update” base for all my form submissions (including the multi image field) that’s linked to primary base. The trigger happens “When a record is created, run a script”

Since I have the same code that I copied form yours, why do I get the error in line 15? Wouldn’t the script pull the record ID from the trigger (trigger happens when a record is created)?

Is it coming up with an error because your script is pulling from an existing record (triggered by an update to the record) instead of grabbing from a new record that was created?

There’s probably this one tiny thing I needed to change in the script that will fix this lol.

Let me know if you can help with this. Sorry for all the questions, just been stuck on this part for some time now and getting desperate lol. Thank you!

Please show, how you defined the recordID in the script settings.

1 Like

Hey Chekanov,

I tried a different route basically going straight from webflow forms > Zapier with Syntax > Back to webflow CMS Multi Image. Using the syntax you showed to make it an array.
Anything wrong with the syntax you are seeing in the screenshot below? not working for me


Thanks!

Yea didn’t work, Zapier sent this, which is your syntax exactly back to webflow

multiimageslider:

[{“url”:“https://webflow.com/files/61705f8de360591624e27184/formUploads/be4d3536-6528-4039-96af-f0720cf4e6f3.jpg",“alt”:“Text”},{“url”:“https://webflow.com/files/61705f8de360591624e27184/formUploads/781d1573-b54e-4ecf-8d62-db8967afa1ab.jpg”,“alt”:"Text”}]

using this method

Let me know if you got any ideas

Hi @russell_mce! It looks like you mix different quote symbols.