Circular Profile Pictures Possible?

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

  • 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

8 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.

1 Like

even 100 should do:

283626

1 Like

![Screenshot_20180607-

It works thank you all so much

1 Like

I had luck with the following settings

Imgix

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

Thank you soo much this helped a lot!!

I made this by using Shape-element, made it circle by setting dimensions 40x40 and roundness to 20. Then I choosed the background style as a dynamic image of User’s Pic.

1 Like

I was struggling with this, but this works perfect, thanks a lot