Cloudinary: Image Filters and Overlays in Glide!

You’re a hero!

1 Like

@ionamol deserves some credit for finding the resource to begin with! I just finished creating the third tutorial—image overlays! Will post it below once it finishes uploading/processing.

1 Like

Thank you, Robert!

1 Like

Both of you do great stuff!

1 Like

Tutorial #3: Image Overlays w/ Cloudinary

Make sure to watch the first two videos—they set the premise/logistics to accomplishing this feature.

This video explains:

  • The syntax of an overlay image in Cloudinary
  • How to concatenate columns to construct an image dynamically from two columns in your sheet
  • How to do relation > lookup > template columns in Glide to construct the image overlay URL

Excited to see what y’all come up with. Reply to this thread with your examples!

Enjoy!

9 Likes

Oh…and this:

3 Likes

Have you noticed that images are now loaded by default on Cloudinary?

That’s a great feature as we will be able to perform lot of transformations within Glide, playing with the images URLs!

1 Like

Not loaded on Cloudinary, to be exact, but displayed by Cloudinary

What do you mean? The preview of the image in the columns?

I’ve noticed that the title and overlays for images use cloudinary when viewing page source. Kinda wonder if you can have the image url to use some of cloudinary’s magic.

Wait…you mean the tag/avatar of tiles/images use Cloudinary?

Not 100% but I’m assuming based on what I saw in the page source. They are stealing your ideas @Robert_Petitto.

1 Like

Hum wait, yep in fact it’s the preview of the image, in the data editor, sorry. I copy paste the url of this preview to store it into another app, to avoid loading again the same image. That’s how I notice Cloudinary is used, yes. Sorry :pray:t2:

Oh…wow, never even realized. Yeah…it looks like Glide is passing their firebase images through Cloudinary via a fetch. I don’t think we can necessarily take advantage of that, but it makes a lot of sense how they’re able to do tags/avatars, etc.

If you want to mimic the title component (one line of text), do this:

=ArrayFormula("https://res.cloudinary.com/glide/image/fetch/e_gradient_fade:20,y_-0.5,b_black/l_text:Arial_20_bold:"&encodeurl(A2:A)&",g_south_west,x_10,y_10,co_white/"&encodeURL(D2:D))

Where your text is in column A and your image is in column D. You can also play with the colors

5 Likes

AMAZING work Roberto

2 Likes

AMAZING no2

@Robert_Petitto, You’re my new hero brother. thanks for this amazing insights

3 Likes

@Robert_Petitto just echoing how stellar you are :love_you_gesture:

I can’t wait to go through your tutorials and see how I can incorporate this into my next project.

1 Like

@Robert_Petitto The Cloudinary parameters are nice. Good find. Thank you.

1 Like

this is super awesome. I look forward to many more “hacks” like this. This is sweet. Congrats for the find and the generosity to share!

1 Like