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

This is a great solution!

Another option we have used in the past is having a crazy high corner radius (rounded corners) on an image. If your image is 200px wide and you apply a 400px round, it will make a circle even if the size increases a bit.

NOTE: If you started working on your Bubble app many ages ago, you might need to look in your App Settings for a resolution setting. Originally, back in the day, Imgix had an accessible drop down value in the App Settings that let you choose 72dpi (1x) or retina (2x) - this eventually became automatically handled by the libraries, so it should look good.

I mention this last note, because if somehow your value was “set” to 1 or 2 and not “auto”, perhaps your Imgix settings are somehow stuck at a lower resolution value.

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!

Sure thing! This is specificially the thread I have used a few times. NOTE: Again, just to be clear, unless you selected the name for this app a while back, this setting is probably not the solution. I have only seen this bug/weird behavior on older apps.

If you do not see “Output density” or similar (with a drop down and numbers like 1 2 4 16 etc) then your app does not show this setting. None of my newer ones do. If you did create this app a long time ago and the behavior here

is what you are getting as well, you might reach out to Bubble support and see if they can fix something on their end…

1 Like