Cloudinary: Image Filters and Overlays in Glide!

Community Resources
21

You’re a hero!

2 Likes
22

@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
23

Thank you, Robert!

1 Like
24

Both of you do great stuff!

1 Like
25

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!

11 Likes
26

Oh…and this:

3 Likes
27

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
28

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

29

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

30

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.

31

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

32

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

1 Like
33

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:

34

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

6 Likes
35

AMAZING work Roberto

2 Likes
36

AMAZING no2

37

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

3 Likes
38

@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
39

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

1 Like
40

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