Airtable

Use Airtable scripts to resize and crop images

Use Airtable Scripts and Kraken.io to resize and compress images with one click

In this video we'll walk through an Airtable Script that automatically resizes and compresses images using the Kraken.io API. For this tutorial we brought in a special guest and old friend, Matt, a New Zealand based developer extraordinaire.

Code

Copy this code with the button at the bottom.

//Trigger: User clicks button
// settings you change:
// ========================
let apiKey = "yourApiKeyHere";
let apiSecret = "yourSecretHere";
let originalFieldName = "Original";
let largeFieldName = "Large Web";
let largeWidth = 630;
let smallFieldName = "Small Web";
let smallWidth = 416;

// ========================
// Image resize code
// ========================

let table = base.getTable("Employees");
let record = await input.recordAsync("Select an Employee whose images you would like to create", table); 

// need an image there
if(record.getCellValue(originalFieldName) === null){	
		//console.log("Please upload an image for this record");
    output.text("Please upload an image for this record");
    return;
}

let imageToResizeUrl = record.getCellValue(originalFieldName)[0].url;

// send stuff to image processor
let callToKraken = await remoteFetchAsync('https://api.kraken.io/v1/url',
    {
        method: 'POST',
        body: JSON.stringify(
            {
                "auth": {
                    "api_key": apiKey,
                    "api_secret": apiSecret
                },
                "wait": true,
                "lossy": true,
                "url": imageToResizeUrl,
                "resize": [
                    {
                        "id": "small",
                        "strategy": "landscape",
                        "width": smallWidth,
                    },
                    {
                        "id": "large",
                        "strategy": "landscape",
                        "width": largeWidth,
                    }
                ]
            }       
        ),
        headers:{
            'Content-type':'application/json',
            'Accept':'application/json'
        }
    }
)
let returnedImages = await callToKraken.json();
// some debugging checks. Uncomment to view
//console.log(returnedImages); 
//console.log(returnedImages.results.small.kraked_url);

//add images as attachments into Airtable row:
// "small" and "large" under "results" below are the IDs we specified in the Kraken body above
await table.updateRecordAsync(record, {
    [smallFieldName]: [ { url: returnedImages.results.small.kraked_url } ],
    [largeFieldName]: [ { url: returnedImages.results.large.kraked_url } ]
})

Use Airtable scripts to resize and crop images

More tutorials

Back button in Webflow

Webflow + Jetboost

Airtable Tip - Structuring your Base with Helper Fields

Dynamic images in Webflow with SVG's or sprites