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

[pachocastillosr]

Hi,

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

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:

And the border radius setting like this:

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!

[buero]

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

+++++

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

+++++

[plaidpixel]

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.

[TipLister]

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

Using Croppie for Images on Bubble

[pachocastillosr]

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!

[pachocastillosr]

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

[pachocastillosr]

This might be useful as well, thanks!

[plaidpixel]

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.

Images uploaded are always blurry

Most of the time, if I change the “Output density of image” in General Settings of app. This is fixed. But sometimes this is not enough so I use :processed with imgx and set the quality to 100. Finally, SVG is my last option if I have issue.

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

Images uploaded are always blurry

Hi all, For some reason whenever I upload a high res logo or graphic to an image element, despite having fixed width unticked, the image is rendered blurry and rough. It is not the image quality itself as they are very high quality and render on websites fine, but just not in Bubble. It means our logo is blurry and distorted, any idea how to make Bubble just render it properly and not compress or skew it? Examples: Original: [27] Bubble’s render: [39] Reece

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