[MEGA TRICK] 🖼️ Edit and Combine Images Right in Coda!

TL;DR: Please check out and support my Edit Images Pack — the one I built for the Packathon.
It’s freaking dope what it can do.


Okay, here’s the biggest trick since discovering SVG and HTML+CSS in Coda.

:arrow_forward: You can tweak images right in Coda!

ezgif.com-gif-maker (36)

:arrow_forward: Not just tweak, but also apply artistic effects!..

ezgif.com-gif-maker (37)

:arrow_forward: …Recolor images to fit the palette!..

ezgif.com-gif-maker (38)

…And even combine images together!

ezgif.com-gif-maker (39)

And all of this with no 3rd party tool subscriptions!


:exploding_head: How???

The short answer: by adding special URL parameters to uploaded image URLs.

The long answer

Turns out, Coda uses the service called imgix to process all images that are uploaded to Coda. Props to @Abhishek_Amit for telling me about this.

The main purpose of imgix is to optimize images for loading on different devices and in different countries. It can covertly resize images for different screen sizes, subtly reduce quality to save up on size and loading time, and serve images in a better format. The way it works is that you set it up on your online storage (e.g. an Amazon bucket), give it a custom domain, and it does all the magic for you.

Actually that’s what I hinted at in my previous trick: the image is uploaded to codahosted.io but is then served to the doc through the codaio.imgix.net server, with auto=compress,format options turned on. To get the original image served, all you had to do was to replace the domain back to the original one and remove any query parameters from it.

That said, optimization is not all that imgix does.

If you look into its Rendering API, you’ll see a hundred of things you can do to those images, from resizing and cropping to compositions (a blend and a watermark), face detection and palette extraction. All of these can be accessed by simply adding &url=parameters to the image’s imgix URL, like this:

And composition can be done by overlaying a “watermark” (doesn’t have to be a watermark) or a “blend” with Normal blending mode, e.g.:

:fire: Holy hell, I want this!

:coda: I just made a pack for that! :grin:

If you read the long description above you know that it didn’t even have to be a pack — you could just Concatenate() the URLs yourself right in Coda Formula Language.

Yet this pack still goes an extra mile:

  • It is well documented

  • The formulas and their parameters are redesigned to be more intuitive.

    With raw URL manipulation you’d have to go and learn which arguments play nicely with which and what depends on what. The way I organized it in my pack, you won’t have to figure.

  • By default, imgix only allows blending of three layers (the base, the blend, and the watermark).

    I hacked the way to bring it up to 5, and there may be some room to squeeze in a few more.

It’s still WIP. I released what I managed to make in time for the Packathon, therefore some features from imgix didn’t make it. But rest assured I’ll add them by the end of August.


:point_down: The doc from the gifs above — play with it and copy as you want


:technologist: The Packathon?

I participated in the 2022 Coda Packathon and this is my submission for it.

Right now there’s Community Voting going on. Aside from the 1st, 2nd, and 3rd prizes, the top voted doc will win an extra $1k prize for being the Community darling :smiling_face:

I could really use some support. If you liked what I did, please give Edit Images a :+1:
(and check out other submissions as well)


Cheers,
Paul

10 Likes

UPD: I slept on it and decided I would make it free.

Maybe one day I split the pack into two: the free one for all things effects and adjustments, and the paid one ($2/mo most likely) for composition features. But that won’t happen until I add more value to it (e.g. an even more convenient way to make and share composition templates)

1 Like

@Paul_Danyliuk, you are generous (as always) and wise.

it will be much appreciated.

max

1 Like

it will be much appreciated.

Best appreciation for now is an upvote in the voting doc :wink:

Remember I’m a Coda hacker and I can see who voted and who didn’t :wink: :skull:
Haha, just kidding, I can’t!
…or can I?

2 Likes

So cool! Thanks for sharing how it works and now even the pack. 🫵🏼 You are the man!

2 Likes