# Cloudinary: Image Filters and Overlays in Glide!

**URL:** <https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917>\
**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:** 3

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [July 18, 2020, 3:24pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/41 "2020-07-18T15:24:07Z")

</div>

Hi @Robert_Petitto, thanks a lot for these 3 tutorials.

In my app, users generate a QR Code \> then select a “standard instructions” image from the app (ie. how to use the qr code).  
I would like to generate a final image combining the QR Code image & the instructions;

“Overlays” seem promising but:  
1/ is it possible to automate the overaly encoding (cf. the 60+ caracters step)?  
2/ and (in complement of an approach proposed by @Krivo) is it possible to position the selected image just below or above the overlay?

Thanks in advance

---

<div class="post-metadata">

**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:** [July 18, 2020, 3:44pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/42 "2020-07-18T15:44:28Z")

</div>

The base64 encoded url is tricky to automate.

There is some discussion of it here:

> [@Ideas for Base64Encode of images](https://community.glideapps.com/t/ideas-for-base64encode-of-images/8633):
>
> Wondering if any of you wizards have any ideas for simple ways to do Base64 encoding of uploaded images (needed for Cloudinary image layering). Currently, I have a script writing in an encoding formula. It’s really long and calculation heavy. It’s already showing signs that it’s going to start acting weird as more rows pile up. Lately the last row of that particular column is going blank randomly (causing Glide to not see it and breaking my Cloudinary link), and then when a new row of data is ad…

An importJSON api might do the trick? @ThinhDinh to the rescue?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 18, 2020, 3:55pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/43 "2020-07-18T15:55:32Z")

</div>

> <https://stackoverflow.com/questions/51928409/encode-google-sheet-rows-into-base64-string>

The base64 encode script is here, you can add it to your script then use it as a formula.

```
=BASE64(URL)

```

To automate that, add in the copy down trick.

> [@Tutorial: Arrayformula in Google Sheets, good practices & how to overcome Arrayformula restrictions with scripts](https://community.glideapps.com/t/tutorial-arrayformula-in-google-sheets-good-practices-how-to-overcome-arrayformula-restrictions-with-scripts/9727):
>
> Hi, Today I will show you the script that can make copying formulas down work, when it does not work with arrayformula. But first, let’s have some introductions about arrayformula, for those who has not used this before in Google Sheets, some equivalents in Glide and some good practices while using it. I hope it can help you in building your Glide apps as well as applying it in your normal day job. 
> 
> > **1/ Definition**
> >
> > Arrayformula is defined as “a range, mathematical expression using one cell range …

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [July 18, 2020, 4:36pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/44 "2020-07-18T16:36:09Z")

</div>

Many thanks @ThinhDinh and @Robert_Petitto, I will give it a try!

And regarding positioning one image below or above the original one, should it work with the width-heights parameters?

Thanks again

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 18, 2020, 10:49pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/45 "2020-07-18T22:49:08Z")

</div>

I would do it as below:

- Have a completely blank image as the “base”.

- Your QR becomes an overlay that would be positioned at the top of the base image.

- Your text becomes another overlay that would be positioned just below that.

So it would look like: prefix - l\_fetch for QR - l\_text for the text - base image.

---

<div class="post-metadata">

**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:** [July 18, 2020, 11:37pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/46 "2020-07-18T23:37:24Z")

</div>

That should work.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 18, 2020, 11:38pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/47 "2020-07-18T23:38:47Z")

</div>

Or if he has some time to design the base image, add the text right into that base image (assuming it won’t change). Only the QR overlay to take care of.

---

<div class="post-metadata">

**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:** [July 18, 2020, 11:40pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/48 "2020-07-18T23:40:06Z")

</div>

That would be the easiest solution!

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [July 19, 2020, 6:56am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/49 "2020-07-19T06:56:13Z")

</div>

@AyS_0908 if you get it working and you want to share please share. I hope you fort enough info to pull it off otherwise write again😀

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [July 19, 2020, 7:34am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/50 "2020-07-19T07:34:58Z")

</div>

Thanks to all, I will deep dive into this … I’ll let you know!

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [August 1, 2020, 12:50pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/51 "2020-08-01T12:50:05Z")

</div>

Hi @Robert_Petitto. Understand that you are the Cloudinary expert of the community.  
My organization would like to move from plastic to digital member cards. Would it be possible to show number and name of the logged in user on a image template? I am not at all familiar with Cloudinary so the steps to do it would be helpful. Regards Ralf.

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [August 1, 2020, 12:53pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/52 "2020-08-01T12:53:40Z")

</div>

@Ralf have you looked at this post

[Concept: Sending digital membership card after subscription](https://community.glideapps.com/t/concept-sending-digital-membership-card-after-subscription/9539)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 1, 2020, 1:21pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/53 "2020-08-01T13:21:54Z")

</div>

If Ralf needs help setting it up I’ll be willing to provide instructions via personal message 😄

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [August 2, 2020, 6:52am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/54 "2020-08-02T06:52:46Z")

</div>

That would be great!

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [August 2, 2020, 11:28pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/55 "2020-08-02T23:28:10Z")

</div>

@ Thịnh Đinh Thank you very much for your assistance! Both Glide and Cloudinary are both awesome! Here is the result:Exactly same layout as the analogic plastic card.

 ![Membercard](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/2/2734d8856e683551eff286b83f263c1b24efcacc.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 2, 2020, 11:32pm UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/56 "2020-08-02T23:32:01Z")

</div>

Ahh that looks great! Congratulations.

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [August 3, 2020, 5:03am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/57 "2020-08-03T05:03:37Z")

</div>

This is what a member who has not paid the fee see!  
 ![Not paid](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/6/6c7400898ae6bbeaa4e0041d45767f70f9c14e86.png)

---

<div class="post-metadata">

**Author:** ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)\
**Post date:** [August 3, 2020, 5:14am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/58 "2020-08-03T05:14:43Z")

</div>

@Ralf cool. Well done👍

---

<div class="post-metadata">

**Author:** ![Ralf](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ralf/32/492_2.png) [@Ralf](https://community.glideapps.com/u/Ralf)\
**Post date:** [August 3, 2020, 6:23am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/59 "2020-08-03T06:23:59Z")

</div>

Interesting story?  
@ThinhDinh 23, Vietnam helping @Ralf 78, Sweden!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 3, 2020, 7:26am UTC](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917/60 "2020-08-03T07:26:18Z")

</div>

78 years young! You learn incredibly quick.

[Previous page](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917.md?page=2)

[Next page](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917.md?page=4)
