Cloudinary: Image Filters and Overlays in Glide!

[Robert_Petitto]

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, if not, use the grayscale. This If/Then column is the image component in the Layout.

Thanks again @ionamol

[zzoldan]

Are you using their free plan?

[Robert_Petitto]

I am.

[zzoldan]

Love it! Great job!

[John_Cabrera]

What is the advantage of this over simply uploading two different pre-edited files to your own web server?

[Robert_Petitto]

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

[John_Cabrera]

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!

[Robert_Petitto]

Just got even better!

Figured out how to OVERLAY two images (dynamically!) in Glide and position them however I want WITHOUT CSS/HTML:

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.

[kyleheney]

Whoa that’s impressive. That app is looking awesome with these new additions.

[Carlos_DeSilva]

Wow! Fine work indeed. Well done and thanks for sharing.

[ionamol]

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!

[kyleheney]

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.

[Robert_Petitto]

Thanks, @ionamol. SO THRILLED that you introduced us to this tool. A game changer for sure. And you’re right…#nocode to boot!

[Robert_Petitto]

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?

[erwblo]

Impressive!

[John_Cabrera]

Okay, wow this is rad.

[kyleheney]

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

[Robert_Petitto]

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!

[kyleheney]

Great video, thanks a lot. Looking forward to the overlay explanation!

[Robert_Petitto]

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)