# Watermark on multiple images

**URL:** <https://community.glideapps.com/t/watermark-on-multiple-images/68112>\
**Category:** Ask for Help\
**Created:** [November 24, 2023, 2:17pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112 "2023-11-24T14:17:02Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [November 24, 2023, 2:17pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/1 "2023-11-24T14:17:02Z")

</div>

Hi i’m new in glide and i need add watermark in images on multiple images column, please, can someone help me?

---

<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:** [November 25, 2023, 12:56am UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/2 "2023-11-25T00:56:32Z")

</div>

Cloudinary is the most used solution to edit images on the fly here.

> [@Cloudinary: Image Filters and Overlays in Glide!](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917):
>
> 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, i…

With a multiple images column, you would need to:

- Use a joined text column to join them into string form.
- Use JavaScript to do some work with that string and apply Cloudinary transformations to them.
- Use a split text column to split the JS result back into an array and use that inside an image component.

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 6, 2023, 12:48pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/3 "2023-12-06T12:48:04Z")

</div>

Thanks so much for the reply! I thought about something like that, but I have a very restrictive field to create javascript code, and putting everything together in a string, separating, treating and formatting it as a url, wouldn’t a simple code give me guidance on how to integrate javascript into the glide and if you could test this outside of glide to apply it to glide, if so, what is the chance that my code created and tested outside will work on glide?

---

<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:** [December 6, 2023, 1:57pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/4 "2023-12-06T13:57:53Z")

</div>

I would suggest trying the JavaScript column if you have already written something. First up, I think you should check the right transformation on Cloudinary on a single URL, before writing the JS function for it.

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 6, 2023, 2:13pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/5 "2023-12-06T14:13:31Z")

</div>

OK, I’ll explain the use of these images in my case, and maybe then we’ll have a more assertive and simpler scenario for you to visualize and explain to me a more assertive flow regarding this process.

I’m working on creating a CRM, currently we use a single image for the featured image and a field of multiple images for the extra photos in the ad.

From what I could understand, first I would have to turn this column of multiple images into a simple text column containing the string of each image, treat it as a url using Cloudinary to add the watermark, and then separate the string and creating an array to be able to reuse these images.

However, the multiple image column is not visible when I use the “Joined List” column, which makes me think that I first have to generate each image in Cloudinary and then add each link in a new column and do the flow you suggested, in the scenario where the images are imported directly into the multiple image column, how could I do this flow, or is this not possible?

Note: ignore grammatical errors, I’m using Google Translate.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 6, 2023, 6:39pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/6 "2023-12-06T18:39:26Z")

</div>

> [@Fabio\_Carneiro](#):
>
> However, the multiple image column is not visible when I use the “Joined List” column

Are you sure? Can you show what’s available for selectable columns when you try to create a Joined List column?

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 6, 2023, 6:56pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/7 "2023-12-06T18:56:26Z")

</div>

As much as it may not seem like it, the “Img Banco” column is the column of multiple images, not only it but also other columns that have more than one value per cell, such as arrays, which I cannot access in other visual components and some types of columns, it appears that I can only access simple data where each cell only has a simple value, such as: Text, Boolean or Lookup accessing a simple field like the two mentioned above

 ![glideimageforum](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/4/642a9b077b315c5922fde9aa64022b5788212258.jpeg)

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 6, 2023, 7:22pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/8 "2023-12-06T19:22:47Z")

</div>

I’m stupid, I just found the multiple images column here, anyway, now a new question has arisen, when you refer to using javascript, you are suggesting the “Experimental Code” where I create a type of plugin using javascript as shown in the documentation. glide, right? I found videos teaching how to use this two years ago, I wonder if I can use this field, without fear of it going offline or being discontinued, can I use it without fear?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 6, 2023, 10:09pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/9 "2023-12-06T22:09:33Z")

</div>

It’s a little convoluted to dig through all of the sub menus to find it, but if you just search for a column type of ‘javascript’, you will find it. Just add your custom code, provide any parameters that you want to pass into it, and make sure you have a ‘return’ statement to return any value that comes from that code.

 ![Screenshot_20231206-160041](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/5/c56dcc9ee41a9c964ee33ac4fabc49b9b27c0a79.png)

While it does say that it’s “experimental”, I highly doubt that it would ever be taken away. Too many of us use it on a regular basis. I think it’s experimental only in the fact that it’s a “use at your own risk” type of thing and Glide will not provide support if your custom javascript does not work as expected. It’s pretty well sandboxed tough, so in most cases it shouldn’t cause any problems.

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 7, 2023, 12:49pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/10 "2023-12-07T12:49:35Z")

</div>

Very good, I tried to use this column, but I found it more complicated because I can’t think of very sophisticated logic like treating texts, formatting, adding dynamic data and formatting a return, I believe that creating external code with the “Experimental Code” would be Maybe a “better” solution, what do you think?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 7, 2023, 1:09pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/11 "2023-12-07T13:09:15Z")

</div>

Either way would require writing code. Might as well save a step and do it directly in Glide instead of hosting code externally.

I used ChatGPT to throw together a quick outline of javascript to use. This will need to be modified to your needs. I’m including two parameters (p1 and p2). One would be the comma delimited list of urls and the other could be the watermark url or text or whatever you intend to use for a watermark.

```auto
function applyWatermarkToUrls(inputUrls, watermark) {
  // Split the comma-delimited list into an array of URLs
  const urls = inputUrls.split(',');

  // Modify each URL to apply a watermark using Cloudinary
  const modifiedUrls = urls.map(url => {
    // Modify the line below as necessary to populate a cloudinary url with the necessary parameters. 
    const modifiedUrl = `${url}?watermark=${watermark}`;
    return modifiedUrl;
  });

  // Join the modified URLs into a new comma-delimited list
  const result = modifiedUrls.join(',');

  return result;
}

return applyWatermarkToUrls(p1, p2);

```

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 7, 2023, 1:13pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/12 "2023-12-07T13:13:31Z")

</div>

the part of writing javascript is what makes me happiest, my question is whether I can paste an extensive code like this in the “JavaScript Code” field and it will work even without hosting externally, but I believe that based on your post, I believe that the answer and yes. I’ll do some tests here now that I have a better understanding of this subject, thank you very much!

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 7, 2023, 1:16pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/13 "2023-12-07T13:16:00Z")

</div>

That’s the whole point of the javascript column…to write code that runs in Glide.

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 7, 2023, 1:49pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/14 "2023-12-07T13:49:08Z")

</div>

Ok, I believe almost everything is ready, I need to show these images, preferably in a caroulsel, I generated a column with “split text” how can I use it now?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 7, 2023, 1:54pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/15 "2023-12-07T13:54:35Z")

</div>

Just add an Image component and point it to that Split Text column.

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 7, 2023, 1:55pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/16 "2023-12-07T13:55:38Z")

</div>

i do it, i need show the imagens now

---

<div class="post-metadata">

**Author:** ![Fabio\_Carneiro](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabio_carneiro/32/69038_2.png) [@Fabio\_Carneiro](https://community.glideapps.com/u/Fabio_Carneiro)\
**Post date:** [December 7, 2023, 2:02pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/17 "2023-12-07T14:02:32Z")

</div>

I forgot that I can use split text in the image component, and I think this works now, thank you very much for all the knowledge you shared with me

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [December 14, 2023, 2:03pm UTC](https://community.glideapps.com/t/watermark-on-multiple-images/68112/18 "2023-12-14T14:03:13Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.