Grey scale image

Need help
1

Hi
I’ve a repeating group that shows an images and I wish these pictures were grayscale, it is possible?
Thanks!

1 Like
2

The simplest way is to use grayscale CSS filter.

  1. In page’s Page HTML Header add style rule with id selector, let it be grayscale, to be applied to nested <img> element.
    image

  2. Set ID attribute of your Image element to grayscale.
    image

If you don’t see ID attribute on Image element, unhide it in Settings of your app as described here: How do you enable an ID attribute to a input box or any item - Need help - Bubble Forum.

1 Like
3

Or better apply grayscale to the whole image container: <style>#grayscale { filter:grayscale(1.0); }</style>.

4

Do I have to add an html element as header to the page?

5

Normally, you don’t, assuming you’re on paid plan:

image
image607×907 76.8 KB

But if you’re on the free plan yet, then you need a bit of trick:

image
image607×977 80.8 KB

6

This topic was automatically closed after 70 days. New replies are no longer allowed.