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

Initial examplePosition textMultiple text fieldsText color and bordersAutomatically wrap long lines of textCrop in on a face with a circular maskWatermark an imageWatermark an image in the cornerOverlay a color on an imageGet a Gravatar imageUse a remote imageMultiple remote imagesGenerate a background with a specific colorGenerate a breakup patternCreate a rectangleCreate a circleCreate a triangleCreate semi-transparent shapes

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