Edit Images Pack

Adjust, resize, recolor images and create visuals for social media right in Coda!

Comment 1

Inspiration

Well, I specialize in Coda tricks and finding hidden capabilities :) Also I like thinking out of the box, so I figured I wouldn't do a regular "let’s connect to an API" pack (how would I choose the winning API anyway?) but rather try do something entirely else.

What it does

The pack exposes hidden capabilities of Coda with regard to image uploads. Under the hood Coda uses an image processing and delivery service imgix. Turns out imgix provides quite a few image manipulation options that are available simply by adding query parameters to URLs of the images. It was designed for simple adjusting and watermarking, but I naturally decided to see how far I could go with it.

So the current version of the pack (what I managed to build in time for the Packathon) allows to apply adjustments and effects to images, but also compose assets from building blocks right in Coda — think Instagram posts, YouTube thumbnails and Pack banners 😉 Why pay for 3rd party services if you could do it right from your team’s tool?

How I built it

The pack was build entirely in the Pack Studio (which, in retrospect, wasn’t the brightest idea — the code is over 1600 lines already). Things were learnt along the way — I didn't do JS or TS for the last ten years or so.

Challenges I ran into

Out of the box, imgix doesn't allow arbitrary composition of layers. So I had to hack together a recursive way to include overlays within overlays. This proved to be challenging because of the implicit URL length limit of 3102 characters 🤷‍♂️. I tried to optimize for URL characters but still couldn't compose together more than 5 layers.

Accomplishments that I'm proud of

I’m back in the game, yo! Life got in the way but I’m still the Coda sorcerer I used to be.

What I learned

Pretty much everything about the imgix API. Also that I shouldn't leave everything to the last week even.

What's next for Edit Images Pack

I’ll finish with all the missing features, refactor the code a bit (there’s a lot of similar descriptions and validations), and publish it to the Pack Gallery as a paid pack most likely.

Built With

+ 4 more
Share this project:

Updates

posted an update —

I forgot to mention the person without whom this pack wouldn't be possible — Abhishek Amit from Coda. At first I tried making this pack with an image manipulation JS lib, which was working too slow. Abhishek saw my struggles and mentioned that Coda was using imgix internally so I could just leverage their API. If not for this revelation, I'd probably abandon the project altogether.

Also no pack would be possible without Eric Koleda's fantabulous documentation of the SDK.

Log in or sign up for Devpost to join the conversation.