Forum Documentation Showcase Pricing Learn more

Circular Profile Pictures Possible?

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.

1 Like

maybe something like this in an html element?

1 Like

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?

1 Like

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 @justincrabbe 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

  • square dimension
  • picture as a background
  • “Ajust to element width” & centered image
  • fixed width
  • border roundness >half the element size

It works very well for me

6 Likes

This is the best way to do it. Works with the Shape element as well.

1 Like

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

1 Like

Can’t you change the roundness setting to something really high - like 200? That will round the edges until they look like circles.

tried it but it doesn’t work. went even up to 2,000 and theirs litteraly no diffrence

Set roundness to 240 and process the image with Imgix - check the box that crops the image and change rescale to stretch.

even 100 should do:

283626

1 Like

![Screenshot_20180607-

It works thank you all so much

I had luck with the following settings

Imgix

  • apply circle/ellipse
    Image
  • make image element “fixed width”
  • run mode rendering = stretch