# Make Images Greyscale Automatically

**URL:** <https://community.glideapps.com/t/make-images-greyscale-automatically/72855>\
**Category:** Ask for Help\
**Created:** [April 25, 2024, 11:54am UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855 "2024-04-25T11:54:46Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carbonsquare](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carbonsquare/32/55224_2.png) [@Carbonsquare](https://community.glideapps.com/u/Carbonsquare)\
**Post date:** [April 25, 2024, 11:54am UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/1 "2024-04-25T11:54:46Z")

</div>

Greetings Gliders,

We were looking at the “Experimental” Computed Image Columns to see if there was a way to automatically make the images in our “Featured Image” column grayscale in Glide.

All of our images are in color, but let’s say you want to be able to “grey-out” or turn the image “grayscale” when and event has ended (after a certain date / time) or do the same if an item is no longer in inventory stock (inventory is zero).

How might we create a computed column of the same images in our Featured Image column on the fly but in greyscale to use as a replacement in our If Then Else column WITHOUT the need to re-upload grey versions of the images?

Thought maybe the Experimental “Adjust Color” might do the trick but don’t see a way to feed the original image parameter to this column. Any thoughts? Maybe it could be done another way?

---

<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:** [April 25, 2024, 2:06pm UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/2 "2024-04-25T14:06:31Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/a/1a9ff5e6115bed96a30efc900969fd5b569a2492.png)

You can use this in a template column.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/2/12ab929eff5970c5467630bb16e0e992d0d44cd3.png)

```auto
https://res.cloudinary.com/glide/image/fetch/e_grayscale/{L}

```

With {L} pointing to the original image’s link.

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [April 25, 2024, 2:30pm UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/3 "2024-04-25T14:30:45Z")

</div>

Where does the Cloudinary URL come from? I thought one had to create one’s own Cloudinary account, but apparently not, that’s very neat.

---

<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:** [April 25, 2024, 2:38pm UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/4 "2024-04-25T14:38:46Z")

</div>

Glide has always used it since the Classic days.

---

<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:** [April 25, 2024, 2:41pm UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/5 "2024-04-25T14:41:11Z")

</div>

Here’s another option without having to use Cloudinary. Put this in a javascript column and pass your image as the p1 parameter.

```auto
async function convertToGreyscale(imageUrl) {
  return new Promise(function(resolve, reject) {
    try {
      var img = new Image();
      img.crossOrigin = "Anonymous"; // To avoid CORS issues if loading from a different domain

      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var data = imageData.data;

        for (var i = 0; i < data.length; i += 4) {
          var grey = (data[i] + data[i + 1] + data[i + 2]) / 3;
          data[i] = grey; // Red
          data[i + 1] = grey; // Green
          data[i + 2] = grey; // Blue
        }

        ctx.putImageData(imageData, 0, 0);

        // Convert canvas to base64 Data URI
        var greyscaleDataUri = canvas.toDataURL();

        // Resolve the promise with the greyscale Data URI
        resolve(greyscaleDataUri);
      };

      img.onerror = function() {
        reject(new Error('Failed to load image'));
      };

      img.src = imageUrl;
    } catch (error) {
      reject(error);
    }
  });
}

return await convertToGreyscale(p1);

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/7/b73a8c39259909775fbad70398a99776ce8d22ee.jpeg)

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [April 25, 2024, 2:41pm UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/6 "2024-04-25T14:41:51Z")

</div>

Is the URL dependent then on Glide’s Cloudinary account? If that’s the case, would it be recommended for a company to create their own Cloudinary account to generate their own greyscale URL?

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [April 25, 2024, 2:43pm UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/7 "2024-04-25T14:43:13Z")

</div>

Code really is magic 🤯

---

<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:** [April 25, 2024, 2:45pm UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/8 "2024-04-25T14:45:39Z")

</div>

It uses Glide’s Cloudinary to fetch the image, then transform it. I think Glide still uses it under the hood to transform images nowadays, so I’m fine with that. 100% safe if you create your own account though.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [April 25, 2024, 2:45pm UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/9 "2024-04-25T14:45:45Z")

</div>

> [@ThinhDinh](#):
>
> `https://res.cloudinary.com/glide/image/fetch/e_grayscale/{L}`

This URL was briefly not functioning. It appears to be working again now.

---

<div class="post-metadata">

**Author:** ![Carbonsquare](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carbonsquare/32/55224_2.png) [@Carbonsquare](https://community.glideapps.com/u/Carbonsquare)\
**Post date:** [April 25, 2024, 3:58pm UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/10 "2024-04-25T15:58:59Z")

</div>

Wow that’s amazing! 2 Full Solutions! Thank you ThinhDinh and Jeff\_Hager for the swift resolution. 😄

---

<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:** [May 2, 2024, 3:59pm UTC](https://community.glideapps.com/t/make-images-greyscale-automatically/72855/11 "2024-05-02T15:59:06Z")

</div>

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