Blur list items

Custom Coding
1

Hi there! :slight_smile:

Is there easy way to add custom code for creating blur effect for list items?

I have now list which includes users profiles and that’s the point of my website.

But I would love to make the list items blurred when user is not logged in and then users will log in to see the profiles normally.

2

Hi,

What list block are you using exactly?

1 Like
3

Hi!

Can’t check atm because I am on my phone but it’s the new one. Here is link for the list Kaikki profiilit

I already figured out that if I add custom code to blur the data, anyone could just inspect code and edit the blur effect away?

So I was thinking that maybe I just add images which are blurred and then ask user to log in. Or something.

4

The best way to do it is the following one:

The list you already have with visible images => make it visible only for logged in users.

Duplicate this list in the Softr studio. Make it visible for logged in users only.
In the image field => “map to” => choose a field that is not an image in your database and choose an icon that suits you.

Non Logged in users will see something like this:

Capture d’écran 2025-01-05 233010
Capture d’écran 2025-01-05 2330101733×812 65.1 KB

Logged in users will see something like this:

Capture d’écran 2025-01-05 233117
Capture d’écran 2025-01-05 2331171710×845 153 KB


You can also add a blurred image in your database, but that is going to be much more work (automation to blur image then add it in a specific field then re-use the same logic explained above)
1 Like
5

Thanks! :slight_smile: That’s probably the best and easiest way to do this.

1 Like