For the life of me I’m trying to figure out how to make profile pictures circular so that they look presentable.
What I get is this all the time:
I’ve tried playing around with IMGIX but noting seems to fix the circle (so it looks like the top one above):
What am I doing wrong?
I get the desired results when setting run-mode rendering in Bubble to “Stretch” and in imgix you check off “resize to fit the dimensions by cropping”.
Have you tried removing the image style then adjusting the Roundness associated with the image to get the desired effect? If it’s a standard image size, (ie. 50 x 50, then set the roundness to 1/2 of that, so 25) and that should do it.
Ya doesn’t seem to work.
If users upload rectangle images it doesn’t adjust to perfect circles… unless the image is tiny.
Are you making sure the images are fixed width? If not, they’ll probably stretch with the page.
Bump! Any updates to this? I’ve been having the same issue…
See this example: https://bubble.io/page?type=page&name=circular_photo&id=forumapp3&tab=tabs-1
Image element dimensions are square (200x200), fixed width, roundness = 100. That should do it. The original image is a portrait rectangle.
What I’ve experienced is this setting doesn’t work when the user inputs a massively odd shaped image.
It would be good to have a setting that FIXES it to round.
Or better yet, allows the user to upload and crop right on the screen.
maybe something like this in an html element?
This example allows you to draw a signature and then save it to an image. So maybe you can use the same approach to save the resulting profile image.
Interesting; thanks for sharing. Seem’s workable, though since I’m displaying the same picture at multiple sizes in multiple places this is going to get cluttered fast.
I also suggested this tool a while ago, and a couple of people were interested in co-sponsoring it.
Emmanuel said it would cost $900 to integrate (and the job would be done in a couple of weeks).
Maybe some more people would be interested in co-sponsoring?
Check the box “Resize to fit the dimensions by cropping”, set the Run-mode rendering to stretch, & roundness > 100.
Tried; unfortunately doesn’t fix the issue for me.
It’s been a real pain for me in the past doing this too… So much so that I’ve just built apps that work with square images only.
The problem is people load massive sized images that regardless of setting, need cropping to fit properly.
Circular cropping should work, unless the image in not provided throught Imgix service.
@remdim @JustinC what are the URL of your profile images ?
Mines are something like https://XXX.cloudfront.net/http://s3.amazonaws.com/appforest_uf/f1474534980374x690714586526155500/file_name.png
I will add that this keeps happening to some of my photos when using the imgix ellipse as well. This image original is a 10kb jpeg (blue is the page color):
Like some suggestions above, fter playing for a while with imgix trying to have round profile pictures without success I ended up using only group elements with
It works very well for me
This is the best way to do it. Works with the Shape element as well.
Thought I’d add this to the thread:
@mishav has made an excellet plugin that uses Croppie to allow user’s to crop/zoom/rotate uploaded photos, and it includes a feature for circular images.
Read more in this thread: Croppie - element plugin to crop and zoom images before upload
