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

Showcase Tips and Hacks
1

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:

image
image759Ă—539 87 KB

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.:

image
image1273Ă—355 108 KB

: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

18 Likes
2

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)

4 Likes
3

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

it will be much appreciated.

max

2 Likes
4

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?

3 Likes
5

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

2 Likes
6

@Paul_Danyliuk,

i have been looking into this pack and i must say how impressed i am by your work.

obviously, what it does and all it can do is fantastic and useful.

but the level of detail you have added is what is most impressive.

you could have simply made a simple pack that let us write out the parameters in plain text for all the functions we wanted to use (as webmasters do using the native api url) and then did some conversion into base 64 and leave it up to users to figure out the features and parameters for themselves.

instead you have written a huge list of specific functions for all the features - with named parameters and suggestions etc. a LOT of work. but it makes the pack so much more user friendly.

you could have simply referred us to the list of w3 color-names (easily found online) and documented the list of fonts and modes available, and left the user to get on with it.

instead you provided excellent tables that make it easy to pick the right values.

and each pack formula provides excellent descriptions of its functions and parameters.

and then, to top it off, you made a great demo doc that lets users play with all the features.

and finally, you shared the mechanisms with the community so the underlying process can be understood (as you said, it can be done in pure CFL - the pack just makes it easier to use).

well done indeed. an exemplary body of work and a very useful pack.

max

10 Likes
7

Thanks for your kind words, @Agile_Dynamics!

It’s gonna get even better!

1 Like
8

Hey Coda,

I saw the today’s Docket and was a bit disappointed you haven’t used my pack for those nice velvety monochrome effects. You totally could have, you know :wink:

Also it’s a very timely reason to bump this topic and remind you that today’s the last day you can vote for the Edit Images pack in the Packathon’s Community Choice competition.

9

I have a feeling you wanted to see the source code?

Well, I’m opening it up — without the Composition() part because that may eventually become a part of the premium pack. But nonetheless could be a useful example of how to code packs.

I did it in the Packs Studio hence the single file. In retrospect that was a mistake :sweat_smile: but I managed to slice it down with the help of foldable #region / #endregion tags (a trick I learned back from IntelliJ IDEs)

2 Likes
10

how very generous of you, @Paul_Danyliuk, to share this valuable code.

much appreciated.

and it contains several useful idioms that i will adopt, like the regions to collapse code sections and defining params and regex expressions as const with names, so they can be used throughout the code.

i also learned a lot from how you processed the optional parameter combinations - well thought out.

overall, a masterly piece of elegant coding.

my full-time coding career ended back at the turn of the century when i moved into management & consulting, and was mostly on languages other than javascript (ecma6 and typescript are thus a challenge to me).

so i learn a LOT from even the simplest tricks of the trade when studying other people’s code.

thank you SO MUCH for sharing with us all.

max

2 Likes
11

Very much appreciated @Paul_Danyliuk that you allow us to learn from you. You not only showed many of as the elementary basics of how to Coda, now you set again (like @Daniel_Stieber and @louca.developer ) an example by sharing your code. Merci.

2 Likes
12

Now that this pack basically (finally!) won the hackathon :grin: I hope to find time to actually take this into works and make it complete. And perhaps also make the Storify & Carouselify 2.0 with more extra features.

Not calling any specific deadlines but stay tuned.

5 Likes