# Cloudinary: Image Filters and Overlays in Glide! **URL:** \ **Category:** Community Resources\ **Created:** [February 25, 2020, 2:04pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917 "2020-02-25T14:04:36Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [February 25, 2020, 2:04pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/1 "2020-02-25T14:04:36Z")
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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/1/1ee24a945fee3702318cf820371823959fa3d7bd.gif) 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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/3/38a8398057bb63cce2de3c2f8e6f2b70e993a532.png) Then, simply created an if/then in Glide. If the badge was owned by the user, then use the colored URL, if not, use the grayscale. This If/Then column is the image component in the Layout. ![Screen Shot 2020-02-25 at 9.04.00 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/6/6b1bc986ac12a42c977f77b1cefebbb66aff2586.png) Thanks again @ionamol 💯 ---
**Author:** ![zzoldan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/zzoldan/32/452_2.png) [@zzoldan](https://community.glideapps.com/u/zzoldan)\ **Post date:** [February 25, 2020, 3:50pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/2 "2020-02-25T15:50:43Z")
Are you using their free plan? ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [February 25, 2020, 3:51pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/3 "2020-02-25T15:51:27Z")
I am. ---
**Author:** ![zzoldan](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/zzoldan/32/452_2.png) [@zzoldan](https://community.glideapps.com/u/zzoldan)\ **Post date:** [February 25, 2020, 3:54pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/4 "2020-02-25T15:54:40Z")
Love it! Great job! ---
**Author:** ![John\_Cabrera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/john_cabrera/32/2066_2.png) [@John\_Cabrera](https://community.glideapps.com/u/John_Cabrera)\ **Post date:** [February 25, 2020, 5:23pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/5 "2020-02-25T17:23:27Z")
What is the advantage of this over simply uploading two different pre-edited files to your own web server? ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [February 25, 2020, 5:28pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/6 "2020-02-25T17:28:29Z")
For only two images, not much…but if I build this out, I can eventually make the URL schema a variable, so to speak that can get injected based on a variety of situations. [https://cloudinary-res.cloudinary.com/video/upload/f\_auto,q\_auto,ac\_none,c\_scale,h\_388,q\_80,w\_1170/manipulation\_video.mp4](https://cloudinary-res.cloudinary.com/video/upload/f_auto,q_auto,ac_none,c_scale,h_388,q_80,w_1170/manipulation_video.mp4) [https://cloudinary-res.cloudinary.com/video/upload/f\_auto,q\_auto,ac\_none,c\_scale,h\_388,q\_80,w\_1170/manipulation\_video.mp4](https://cloudinary-res.cloudinary.com/video/upload/f_auto,q_auto,ac_none,c_scale,h_388,q_80,w_1170/manipulation_video.mp4) ---
**Author:** ![John\_Cabrera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/john_cabrera/32/2066_2.png) [@John\_Cabrera](https://community.glideapps.com/u/John_Cabrera)\ **Post date:** [February 25, 2020, 5:35pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/7 "2020-02-25T17:35:19Z")
Wow, that’s pretty cool. I do all of the image editing for the assets in my app, and I have lots of slight variations of things. I upload it all to wordpress blog which does a few of these kinds of things like resized versions and thumbnails. There are plug-ins that add more like grayscale and whatnot. But I could really see this Cloudinary being a nice alternative. Not sure I have enough assets yet to make it worth the switch and the formula writing, but I’ve bookmarked it. Thank you! ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [February 25, 2020, 10:02pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/8 "2020-02-25T22:02:22Z")
# 🤯Just got even better! Figured out how to OVERLAY two images (dynamically!) in Glide and position them however I want WITHOUT CSS/HTML: ![Screen Shot 2020-02-25 at 4.59.01 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/a/aebf54f5e8ccb8d00a926305aad5010bde85c786.png) ![Screen Shot 2020-02-25 at 4.59.14 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/5/5e17600f822f10fed7a741d1aa45002b8fb112c8.png) The rank Icon you see in the lower left hand corner of each avatar will change automatically when users level up. Both images are columns in my sheet. Crazy awesome. ---
**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\ **Post date:** [February 25, 2020, 11:41pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/9 "2020-02-25T23:41:01Z")
Whoa that’s impressive. That app is looking awesome with these new additions. ---
**Author:** ![Carlos\_DeSilva](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carlos_desilva/32/19965_2.png) [@Carlos\_DeSilva](https://community.glideapps.com/u/Carlos_DeSilva)\ **Post date:** [February 25, 2020, 11:51pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/10 "2020-02-25T23:51:00Z")
Wow! Fine work indeed. Well done and thanks for sharing. ---
**Author:** ![ionamol](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ionamol/32/1951_2.png) [@ionamol](https://community.glideapps.com/u/ionamol)\ **Post date:** [February 26, 2020, 1:11am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/11 "2020-02-26T01:11:44Z")
Hey @Robert_Petitto, I really happy that it helped you! I’m also experimenting with overlays and other on the fly transformations, let me know if you need help with anything. Cloudinary adds so much to Glide, it’s like a no visual photoshop for a no code tool hehehe! Your app looks great, congrats! ---
**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\ **Post date:** [February 26, 2020, 2:01am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/12 "2020-02-26T02:01:00Z")
If there’s any chance you can do up a quick demo of how you’re overlaying badges on the fly (the Glide side of things and the Cloudinary), that would be awesome. I have a similar app in the works (users earn badges based on activity), and the way your profile pics look with the badge overlayed is perfectly polished. ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [February 26, 2020, 2:34am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/13 "2020-02-26T02:34:18Z")
Thanks, @ionamol. SO THRILLED that you introduced us to this tool. A game changer for sure. And you’re right…#nocode to boot! ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [February 26, 2020, 2:36am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/14 "2020-02-26T02:36:48Z")
Hey @kyleheney. It took me a while to figure out today, and there’s A LOT of ways to go about doing it…but I’ll create a video tomorrow on the overlay of the Rank image over the Avatar image. Did you want a tutorial on the grayscale VS color badges as well? ---
**Author:** ![erwblo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erwblo/32/75_2.png) [@erwblo](https://community.glideapps.com/u/erwblo)\ **Post date:** [February 26, 2020, 7:23am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/15 "2020-02-26T07:23:38Z")
Impressive! ---
**Author:** ![John\_Cabrera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/john_cabrera/32/2066_2.png) [@John\_Cabrera](https://community.glideapps.com/u/John_Cabrera)\ **Post date:** [February 26, 2020, 7:56am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/16 "2020-02-26T07:56:01Z")
Okay, wow this is rad. ---
**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\ **Post date:** [February 26, 2020, 10:55am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/17 "2020-02-26T10:55:33Z")
I think I know how that is done, but I guess what I’m thinking is more of how you’re able to change it on the fly. I assume it’s all through filter conditions, but how do you then push that to another service (Cloudinary) while maintaining the Glide filtering ability? I’ve never actually used cloudinary but am going to for sure check it out asap. Looks crazy ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [February 26, 2020, 3:17pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/18 "2020-02-26T15:17:04Z")
## Tutorial #1: Conditional filtering of images Here’s my first Cloudinary/Glide tutorial. A bit long, my apologies, but there’s a lot to go over: - Uploading to Cloudinary - Transforming image in Cloudinary - Creating the spreadsheet formula that generates the filter - Creating the Glide Condition/Component to display the appropriate image Enjoy! ---
**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\ **Post date:** [February 26, 2020, 3:55pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/19 "2020-02-26T15:55:14Z")
Great video, thanks a lot. Looking forward to the overlay explanation! ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [February 26, 2020, 6:17pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/20 "2020-02-26T18:17:43Z")
## Tutorial #2: Fetch and Filter ANY Image w/ Cloudinary Half as long as my first video. This one will set up my 3rd video: image overlays. This video discusses: - How to apply Cloudinary transformations/filters to ANY image on the web (including those that have been uploaded by your Glide Users and don’t reside in your Cloudinary Media Library) - How to construct a dynamic Cloudinary image URL by concatenating columns (references the `=EncodeURL()` formula) [Next page](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917.md?page=2)