Overlay a Number on top of an Image with Cloudinary

[Darren_Alderman]

Create a template column in Glide and use this url:

https://res.cloudinary.com/glide/image/fetch/f_auto,h_500,w_500,c_fill,co_rgb:000,e_colorize:50/l_text:Arial_400_stroke:{number},co_rgb:fff,bo_0px_solid_rgb:fff,x_0,y_0/{image_url}

Replace:

• {number} with the number you want to overlay
• {image_url} with the image you want to add the number to

What the image modifications do:

• f_auto,h_500,w_500,c_fill - makes the image a square
• co_rgb:000,e_colorize:50 - add the grey image overlay
• l_text:Arial_400_stroke:{number},co_rgb:fff - adds the number on top of the image (size = 400 and color = white)
• bo_0px_solid_rgb:fff - (optional) add a border to the number
• x_0,y_0 - (optional) move the number up/down/left/right

---

Learn more and other examples here:

Cloudinary: Image Filters and Overlays in Glide!

Thanks to @ionamol for keying me into Cloudinary for on the fly, URL based image editing! This awesome resource allowed me to gray out badges that haven’t yet been earned by the user— [ScreenFlow] Started by uploading the image into Cloudinary and then using the built in tools to generate the new URL. Used this URL schema to create this formula: [Screen Shot 2020-02-25 at 9.01.41 AM] Then, simply created an if/then in Glide. If the badge was owned by the user, then use the colored URL, i…

[Jeff_Hager]

If you ever want to get a little experimental and try this with javascript, here are some examples.

Old calendar layout

The heck with AI (even though I used it to generate this code quickly ). You could use javascript to create a DataURI Image from text inputs and display it in an image container. This is extremely crude and could use some cleanup and refinement, but it would give you what you are looking for. // Function to generate a Data URI image from two text inputs function generateImage(text1, text2) { // Create a canvas element var canvas = document.createElement('canvas'); canvas.wi…