I have not found any good solution in Bubble for circular profile pictures

Hi,

I need circular profile images in my app like the ones in the Bubble forum:
circle image

However, amongst all the suggestions that I’ve seen in the forum, I have not found a single way to do it while keeping a good quality of the image, regardless of the proportions or shape of the image.

Actually, the only way that I found in Bubble that makes it possible to implement good quality circular profile images for any type of image, was using the Wonderful Image Slider Plugin by @Efe and his team and using the “Clamp” setting:
clamp image
And the border radius setting like this:
border radius image

But this plugin does not updates the image data source in real-time, and unfortunately that’s a deal breaker for my app.

If someone has any other ideas, please share them.

Take into consideration that the solution must work for images that are not perfectly round, some will be rectangular, other squared, other circular, some small, some large, etc.

Any help would be appreciated,

Thanks!

You ever tried this?
(You have to check "Apply a circle/ellipse mask)

+++++

I started building my tool JourneyIQ in public. :star_struck:
Find out about our launch strategies, bubbling & quick learnings on LinkedIn.

+++++

1 Like

what works too is using the croppie plugin so users can crop any photo to round.
a how to is outlined here

1 Like

Wow I had not tried this one, it crops a big part of the image but it gives a pretty good result! This works for me, thanks!

Hi! Thanks for the tips! Do you know in what tab of the App Settings can I find that resolution setting?

This might be useful as well, thanks!