# Overlay a Number on top of an Image with Cloudinary

**URL:** <https://community.glideapps.com/t/overlay-a-number-on-top-of-an-image-with-cloudinary/73408>\
**Category:** Community Resources\
**Created:** [May 15, 2024, 4:23pm UTC](https://community.glideapps.com/t/overlay-a-number-on-top-of-an-image-with-cloudinary/73408 "2024-05-15T16:23:55Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darren\_Alderman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_alderman/32/66660_2.png) [@Darren\_Alderman](https://community.glideapps.com/u/Darren_Alderman)\
**Post date:** [May 15, 2024, 4:23pm UTC](https://community.glideapps.com/t/overlay-a-number-on-top-of-an-image-with-cloudinary/73408/1 "2024-05-15T16:23:56Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/a/ea782cca0518150ef0615d6559844db84fcd494a.png)

Create a [template column](https://www.glideapps.com/docs/automation/computed-columns/template-column) in Glide and use this url:

```auto
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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/2/525d42f2093e4e84ce6c957620125c339b59d595.png)

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!](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917):
>
> 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— 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: Then, simply created an if/then in Glide. If the badge was owned by the user, then use the colored URL, i…

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 15, 2024, 4:54pm UTC](https://community.glideapps.com/t/overlay-a-number-on-top-of-an-image-with-cloudinary/73408/2 "2024-05-15T16:54:00Z")

</div>

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

> [@Old calendar layout](https://community.glideapps.com/t/old-calendar-layout/66580/11):
>
> The heck with AI (even though I used it to generate this code quickly wink ). 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…