Grey scale image

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

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.

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

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

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

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

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

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

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