Round Images showing as Square

I figured as much regarding squaring off the images. Is there a way to make this possible without having to restrict the original file size which will drive people away from uploading an image?

It would be good to be able to upload and have bubble make it a square before turning it into a perfect circle.

You can accomplish this without making images square. Process with Imigix: Resize to fit the dimensions by cropping, Set run mode rendering to stretch. Set roundness to 100, or whatever.

4 Likes

Mate, you’re a bloody legend. Struggled all day with this until I read your post.

1 Like

Is there a free plugin option for making an image round? Or the only way to make the image round is to purchase the Imgix plugin? I tried making my image a square and changed roundness to 360 and 1000 but I don’t get a perfect circle but an oblong shape. Any help with this would be greatly appreciated!

Say you have a square 100px x 100px. Set the radius … in other words set roundness to 50px. This should do the trick. This works to achive a circle as long as you have a perfect square and you set the circle’s radius. :+1:

I don’t have time to go through this massive thread from 2015, so this might have been pointed out already :wink:

But, the easiest way of achieving a round image that I’ve found is to create a regular group, set radius to 100 to make it perfectly round, and then set the background to the be the image. Groups bg takes dynamic data, so no issues with having dynamic images. If your image is not perfectly square, because your users upload random image sizes for instance, it will crop the image instead of making it an irregular shaped image.

1 Like

Thanks for the suggestion! I tried using a group and set the roundness, which now shows, but the picture is not showing as a background. See a screen shot below of the blank circle group next to the profile pic that is still showing as oblong when I followed the other suggestion to set the pixels to a square and choose a radius (I did 52 x 52 width/length and roundness was set to 26). See also the below settings I have for the round group set up. Can you see what I am doing wrong that is preventing me from seeing the picture? Thanks!

Profile Pic Roundness

Group Element’s Settings:

The Group’s style settings:
Round Group 2

Round Group 3

Thanks for this suggestion. I tried it and set my image to 52 x 52 width/length and then set roundness to 26, but the image still shows as oblong. See my screen capture of the oblong image in my response to a different suggestion on what to do. Any thoughts on what I might be doing wrong? Thanks!

Make the group fixed width

1 Like

Hmm. I tried setting group to fixed width and it is still showing as oblong …

Watch for any other nested up groups whose responsive setting may be affecting the intended behaviour

Hey, have a look here.

And have a look at the editor

I have no idea if setting it in the styling properties is causing your issue. Try do it directly on the group as in the example above, and see if you get the same result?

Thanks for this example! I don’t see all the options from your example on my own group config pop up window - I am not sure why. It still isn’t cropping it to a perfect circle for me. I might have to join an office hour if there is one this Thursday, to see if someone can help me with it…

Did you click “remove style” underneath the Style dropdown. that will expose more options in the group panel. When a group has a style assigned to it, the bubble style settings overrides the individual group’s settings and hides them.

Ah. I thought I had removed the style. I went back and retried this again with the style removed and now it works! Thanks a lot!