Cloudinary Image Maker

Configuring cloudinary urls by hand is a tedious. I made this to make it easier. (It's json so it's still kinda tedious, but I find it easier than trying to mess with URLs. Especially when there are long text strings and escaping involved)

I use it to design templates for open graph (OG) images for the social network cards that show up when you share a link. It's nothing fancy. You edit the json in the box below and a preview of the images along with the url.

Check out these examples to get you started

Notes

• The examples that use "c_fill" cut off parts of the image to keep the desired perspective without distorting the image. Check out the docs for alternatives.
• Usage details are below, but I find it's easier to just click around the exmaples and look at the code to figure out how things work
• The cloudinary reference docs with all the stuff you can do are here
• The preview image width is constrained. The generated urls are unaffected by this and will resize to whatever dimensions you spec out
• Cloudinary's api does a bunch of stuff. This doesn't cover everything, but it'll get you pretty far. (and you can always just drop an entire string with whatever you want into a section to trigger it)
• You're supposed to be able to get images from Twitter and YouTube, but those failed for me even when I hand assembled the urls based of the documentation.
• The text samples show how to set fonts like 'Averia Sans Libre_19_bold'. Leave any spaces in the font names and they'll be formatted correctly when the url is generated.
• Some google fonts are available for use. I put together a list here: google fonts you can use in cloudinary transformations
• Use `:` as the seperator if you need to use an image from that's in a folder on in the cloudinary media libray. For example, `{ "l_og-images:1x1-white": [] }`
• There is a `letter_spacing` option but as far as I can tell it only increases spacing and can't contract it.
• You can pass font weights to the text calls (e.g. `Source Sans Pro_80_900`)

Usage

• You can use versions and folders in the BASE_IMAGE (e.g. "v1643773709/og-images/blank-v4")
• Trailing commas in the json don't work (formatters usually spread this across multiple lines, but something like this `['a', 'b', 'c',]` will choke). If you get an invalid json, that's the first thing to check
• Both object keys and values require double quotes
• Each "section" in the "SECTIONS" array represents code that will go in between slashes in the final url
• Each section is itself an array of item objects
• Each item object has exactly one key and one value
• The value of the item objects are always arrays of parameters
• The item object parameters array always exists, but it can be empty
• In sections, individual items are joined with commas
• If there are parameters on an item, those are joined to their corresponding key with ":" characters.
• Text is in the parameters is automatically encoded for urls
• Add an slash to escape quotes to use them in text (i.e. `\"`)
• Text must all be on one line in the json
• Paragraphs can be created by adding two newlines (i.e. `\n\n`)
• Commas in text are replaced with a double escape sequence to prevent them from conflicting with cloudinary's functionality

Possible Enhancements

• Setup so the tab key adds tabs in the box instead of tabbing to the next window
• Setup so that if there's an invalid json or the image isn't there the area doesn't collapse and shift the textarea around
• Add vim controls
• Made this thing responsive
• move off of document.execCommand() to the newer navigation api for copying the url to the clipboard
• Have the image switch to some type of loading spinner when a new image is being genearted
• Make a button that adds a new section stub
• Make a button that adds a new item to the last section
• Maybe handle newlines in strings to make it easier to see longer lines of text
• Store json history in local storage
• Setup the ability to post samples and code to twitter for storage, reference, and sharing
• Wire up prettier or another json formatter
• Add syntax highlighting
• Maybe split out the json sections to individual text areas
• Reverse the process so you can drop in a url that gets parsed out to a json for editing
• Examples with artistic filters
• Generate a page with font samples for available fonts
• Show a backup default image example
• Look at the layout stuff for making pdfs
• Show a colorblind assist example
• look at conditionals and variables for possibility of generative art
• see if masking layers can make better triangles
• Look into css sprite creation
• See how their responsive images work
• Look at custom functions and wasm stuff