If you are looking to jump directly to the tool, click here to open it (in a new tab)
Source Code: https://github.com/joshuatz/cloudinary-wysiwyg
6 Minute Intro Video
This video covers most of the content on this page, so feel free to give it a view instead of, or in addition to the content below.
Spreadsheet used in Demo Video with samples and formulae:
Link: Here
What is Cloudinary?
Normally, when you combine images, text, and other elements into a new compiled image, perhaps with Photoshop, in order to share that resulting image with other people, you would need to save it and then upload it somewhere. Cloudinary changes the game; upload a “base” image, and then you can apply as many transformations, effects, or overlays to that image simply by manipulating a shareable URL. This is easier to show than it is to explain, so here is an image that shows 4 different URLs, all generated from one original image (the top left image):
What is the Cloudinary-WYSIWYG Editor Tool?
I found the concept of Cloudinary fascinating, and I realized that their transformations (crop, rotate, skew, etc) could be combined in ways that pushed the limits of the platforms, but a major limiting factor is how confusing they can be to manually join together and keep track of. To illustrate that, here is a URL that was generated by this editor tool, but would have been practically impossible to parse out by hand:
https://res.cloudinary.com/ACCOUNT_NAME/image/upload/c_fill,h_500,o_40,w_500/h_224,l_pixel,w_224/co_rgb:070707,e_colorize,fl_layer_apply,g_north_west,x_28,y_75/h_395,l_pixel,w_454/co_rgb:2744a6,e_colorize,fl_layer_apply,g_north_west,x_23,y_35/h_210,l_pixel,w_210/co_rgb:ffffff,e_colorize,fl_layer_apply,g_north_west,x_34,y_82/c_scale,h_188,l_profilepicture,w_215/fl_layer_apply,g_north_west,x_34,y_107/h_209,l_pixel,w_208/co_rgb:ffffff,e_colorize,fl_layer_apply,g_north_west,x_254,y_82/l_text:Roboto_37_normal:Stats:/co_rgb:000000,e_colorize,fl_layer_apply,g_north_west,x_316,y_93/l_text:Roboto_19_normal:Flowers%20Pollinated%20:%2020/co_rgb:000000,e_colorize,fl_layer_apply,g_north_west,x_266,y_141/l_text:Roboto_19_normal:People%20Chased%20:%2025/co_rgb:000000,e_colorize,fl_layer_apply,g_north_west,x_266,y_167/l_text:Roboto_55_normal:Buzzy%20McBuzzer/co_rgb:ffffff,e_colorize,fl_layer_apply,g_north_west,x_52,y_314/l_text:Roboto_31_normal:Rank%20:%2010/co_rgb:ffffff,e_colorize,fl_layer_apply,g_north_west,x_170,y_380/h_119,l_pixel,w_119/co_rgb:c8c61f,e_colorize,fl_layer_apply,g_north_west,r_59,x_295,y_194/l_text:Roboto_42_normal:%3C10%3E/co_rgb:000000,e_colorize,fl_layer_apply,g_north_west,x_308,y_237/sampleThis editor let me build that URL by dragging and dropping shapes, images, and text, all without ever needing to manually edit a URL or understand how editing steps convert to Cloudinary transformation parameters. However, if you are a developer that is looking to learn more about Cloudinary, this is also a great learning tool because it lets you instantly see how a visual change (resize, move, color, etc.) is reflected by a change in the Cloudinary transformation “chain”.
But what is it for??? / Practical Applications:
Beyond serving as a learning tool for Cloudinary novices, calling it an editor might lead to some misgivings. This tool is really not meant to be a replacement for Photoshop, or even Paint.net for that matter. If you just need a one-off image, this editor is going to leave you disappointed. What this tool was meant for is when you need to generate 1,000+ unique images, all based on a set of dynamic inputs. This is usually needed when you are developing an application or something that wants to be able to “share” rich media updates to Facebook, Instagram, Twitter, Slack, etc. For example, let say you are making a social gaming application, and you want users to be able to share an achievement with their friends (something like “Reached Level 10!”). You could simply have them share a block of text, but that is not very attractive, and if you are looking to grow your fanbase, you might want them to be able to share a flashy image that might attract the attention of their friends. Again, you could just create a single image that everyone shares when they reach level 10, but again, not that impressive. What if you could have them share an image that features the achievement text, their profile picture, and other dynamic details? You can with Cloudinary, and you can use this tool to build the template! In fact, that super long URL in the above section was created with my tool, and generates this image based on user profile data:
Another example is generating images where the base template, e.g. the background of the image, does not change, but the overlaying text changes frequently and is unique per user. The example I provide in my demo video is for a theoretical SlackBot that messages Jira users with a daily task summary:
In this Jira example, I create the background template outside of my editor tool (but could have actually used it if I wanted to) and then used it as the “base layer” in my editor, while positioning text on top. Then, using JS/NodeJS/PHP/Google Sheets/Whatever I want to use, I can dynamically generate thousands of these status updates, completely unique per user with their stats.
Some other practical applications:
- E-commerce sites
- Overlay product details in text over product image
- Embed templated images into your product feed for use with Google Shopping, Facebook Product Catalogs, etc.
- Cloudinary learning tool
- Mess around with different combinations to see how different objects get converted into chained transformations, and subsequently into a URL string
- Dynamic image generation for Google Sheets or any other spreadsheet program
- You can use this tool to create the template, then use spreadsheet functions like CONCAT() to create the URL dynamically given values in other columns
- Dynamic image generation for sites that can’t use server-side image manipulation – this way you can use Javascript, plus the export from this tool, to generate an <img> tag src completely 100% client side.
- Meme generators / image macro sites
- Creating image embeds for Slack Apps / Slack bots / FB Messenger Bots
Behind the Scenes / Tech Used:
The true originating force behind the creation of this tool was rather simple; I wanted to learn the basics of ReactJS and build something cool as my first project using it, then thought of how, a bit earlier, I had been wishing that something like this tool existed. Although I feel like the end product is pretty neat, I still have mixed feeling about React even after getting my feet wet. My next project will probably use VueJS, which although similar, has some key differences that I think my suit my development habits.
A library / framework that I used extensively on this tool, and can talk about much more positively than React, is Fabric.js. Don’t let their somewhat cheesy homepage fool you; this is an amazing library for manipulating Canvas elements with Javascript. Like, seriously amazing. Every time I thought I was going to have to write my own code to handle something I assumed they wouldn’t cover – bam – they would have support for it out of the box. For example, if you want to get the coordinates of an imaginary “bounding box” that contains a canvas object of interest, you can do so with just one line of code.
Obviously, kudos to Cloudinary as well, for providing a very impressive service, comprehensive documentation, and quickly responding to my GitHub issue 🙂
