# How to force perfect circular shape of photo? **URL:** \ **Category:** Database\ **Created:** [April 13, 2019, 8:17pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358 "2019-04-13T20:17:15Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [April 13, 2019, 8:17pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/1 "2019-04-13T20:17:15Z")
My users will upload a profile photo. I have set the photo with 360 “border” and to rescale. However, in testing, depending on the photo the user selects, the photo sometimes expands beyond the 360 degree boundary making an oblong photo. How do I force photos to confirm to a 360 degree circular shape? ![image](https://us1.discourse-cdn.com/bubble/original/3X/2/9/299a9f019c8c2f87db878d2678ce41fd6c33ca62.png) ![image](https://us1.discourse-cdn.com/bubble/original/3X/7/6/76be472f43902399c0893ecf922406468bd27d0d.png) ---
**Author:** ![Jici](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jici/32/30722_2.png) [@Jici](https://forum.bubble.io/u/Jici)\ **Post date:** [April 13, 2019, 8:39pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/2 "2019-04-13T20:39:38Z")
Did you try to use :processed with imgix? [https://bubble.io/reference#Data.Messages.image.url](https://bubble.io/reference#Data.Messages.image.url) ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [April 13, 2019, 8:57pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/3 "2019-04-13T20:57:56Z")
Never heard of it. Where do I set that parameter? ---
**Author:** ![Jici](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jici/32/30722_2.png) [@Jici](https://forum.bubble.io/u/Jici)\ **Post date:** [April 13, 2019, 9:01pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/4 "2019-04-13T21:01:57Z")
Click on your Current users… Photo, you will see “more” and you will have this option ---
**Author:** ![peter8](https://avatars.discourse-cdn.com/v4/letter/p/ee7513/32.png) [@peter8](https://forum.bubble.io/u/peter8)\ **Post date:** [April 13, 2019, 9:03pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/5 "2019-04-13T21:03:00Z")
The answer is to set roundness to 200 ![image](https://us1.discourse-cdn.com/bubble/original/3X/9/2/927ceabc8b916e395eac2d0a426bbf68632bf516.jpeg) ---
**Author:** ![Jici](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jici/32/30722_2.png) [@Jici](https://forum.bubble.io/u/Jici)\ **Post date:** [April 13, 2019, 9:06pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/6 "2019-04-13T21:06:43Z")
Also an option 😉 But I found that in some situation, imgix work better ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [April 13, 2019, 9:11pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/7 "2019-04-13T21:11:30Z")
I am not seeing this option. This is what I see ![image](https://us1.discourse-cdn.com/bubble/original/3X/a/f/afb0c46df7beaf0fb3235c4ad86c45ab4aa9d956.png) ---
**Author:** ![Jici](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jici/32/30722_2.png) [@Jici](https://forum.bubble.io/u/Jici)\ **Post date:** [April 13, 2019, 9:13pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/8 "2019-04-13T21:13:40Z")
![13-17-13-41](https://us1.discourse-cdn.com/bubble/original/3X/c/8/c858c34110dcb8024349aa0a3963b96334b92ba0.png) ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [April 13, 2019, 9:14pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/9 "2019-04-13T21:14:16Z")
I tried this, but the photo is still oblong. ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [April 13, 2019, 9:15pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/10 "2019-04-13T21:15:41Z")
Do you have a plugin installed to give you this option? ---
**Author:** ![Jici](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jici/32/30722_2.png) [@Jici](https://forum.bubble.io/u/Jici)\ **Post date:** [April 13, 2019, 9:18pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/11 "2019-04-13T21:18:01Z")
no. [https://nimb.ws/36m2kS](https://nimb.ws/36m2kS) ---
**Author:** ![peter8](https://avatars.discourse-cdn.com/v4/letter/p/ee7513/32.png) [@peter8](https://forum.bubble.io/u/peter8)\ **Post date:** [April 13, 2019, 9:41pm UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/12 "2019-04-13T21:41:22Z")
The roundness option is available in Visual elements / Image for displaying the image. Not available in the image uploader. ---
**Author:** ![calicass83](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/calicass83/32/181870_2.png) [@calicass83](https://forum.bubble.io/u/calicass83)\ **Post date:** [April 14, 2019, 1:36am UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/13 "2019-04-14T01:36:45Z")
I’m still trying to figure out where you got that picture element. The one that came pre-loaded with Bubble looks like this, with the default name ‘Image A’. Because the one that comes pre-loaded with Bubble doesn’t give the extra options you showed. When I click more, these are the options I get: ![image](https://us1.discourse-cdn.com/bubble/original/3X/b/b/bb25c512475af080c4b33b885cb214f3b43fba1a.png) ---
**Author:** ![duke.severn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/duke.severn/32/38191_2.png) [@duke.severn](https://forum.bubble.io/u/duke.severn)\ **Post date:** [April 14, 2019, 2:40am UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/14 "2019-04-14T02:40:41Z")
I’ve run into this problem 120983875 times since I’ve started using Bubble. Also your border roundness is not in degrees, but in pixel radius. You only need half the height/width to make it perfectly round if I understand anything correctly. My solutions: 1. Simple: put picture as background of a group instead of in an image thing. Check both the “crop” and “centre” options, make sure “make as wide…” is unchecked. Border roundness sufficiently high (based on width, I just use 100 for anything less than 100px width/height), obv. Limitations: picture will always be round and full, but sometimes very zoomed in. It’s a step up from the problem shown by the OP. 2. Complex: I ended up using @mishav’s plugin Croppie (Mishav you’re a rockstar btw.). It’s almost stable, the only bug I’ve found is that sometimes if you enable zoom it zooms out too far, but I would say useable. Then you need to set up a sort of process where the the croppie loads the input picture and saves it to the db. Then you’ll always have a 1:1 picture (by extension round when clipped by border radius). It took me about 2 hours of testing to get a stable, working version so play around with it you’ll get it relatively easily. ---
**Author:** ![Jici](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jici/32/30722_2.png) [@Jici](https://forum.bubble.io/u/Jici)\ **Post date:** [April 14, 2019, 2:40am UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/15 "2019-04-14T02:40:55Z")
I think that you are using a “file” field type and not an image field type this is why you don’t see this option. ---
**Author:** ![duke.severn](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/duke.severn/32/38191_2.png) [@duke.severn](https://forum.bubble.io/u/duke.severn)\ **Post date:** [April 14, 2019, 2:42am UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/16 "2019-04-14T02:42:26Z")
Have you tested how resource-intensive processing each image with imgx is in a repeating group (for instance messaging)? I’m assuming that this processes everything on client load and I was wondering how much slower your app was compared to loading just a picture? ---
**Author:** ![Jici](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jici/32/30722_2.png) [@Jici](https://forum.bubble.io/u/Jici)\ **Post date:** [April 14, 2019, 2:50am UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/17 "2019-04-14T02:50:51Z")
I didn’t get a chance to test it on a very large repeating group. I’m not sure on how much this can be more ressource intensive because they are not processed by bubble but by imgix server (So maybe for them, it’s take more ressource, but I guess they have a kind of cache too). On bubble side, it’s just a modification on the image url. So one image not processed or processed by imgix, I guess this is the same for Bubble. ---
**Author:** ![peter8](https://avatars.discourse-cdn.com/v4/letter/p/ee7513/32.png) [@peter8](https://forum.bubble.io/u/peter8)\ **Post date:** [April 14, 2019, 6:08am UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/18 "2019-04-14T06:08:20Z")
Here are my settings and output for rounded images. Hope this helps … ![canvas](https://us1.discourse-cdn.com/bubble/original/3X/6/6/665303f420969faba6ff8aceb4e5ae65dc34a996.png) ![peter-test](https://us1.discourse-cdn.com/bubble/original/3X/1/a/1ae7850ef7c1070f749e0dc1a3a5e473157a8b8d.png) ---
**Author:** ![keith](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keith/32/56020_2.png) [@keith](https://forum.bubble.io/u/keith)\ **Post date:** [April 14, 2019, 7:20am UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/19 "2019-04-14T07:20:47Z")
OK, folks. Here is the answer you seek: The problem the OP was having is that their image is not square. A square image CANNOT be made circular simply by adjusting border roundness. Similarly, if we have a square image or group that might include an image, if that container becomes non-square – for example, by responsiveness – we cannot ensure that the image inside can be presented as circular. SO, the solution has several parts: (1) we must ensure that the container in which the image is contained is – and stays – square, (2) we must ensure that the container does not become non-square due to the image’s non-squareness (i.e., we must crop the image, (3) we must round the container element so that it appears circular (now that it is always square). How do we do this?: 3 is easy(ish): Bubble does not let us round elements properly. The correct way is to set roundness in % units (50% is perfectly round). Since Bubble only lets us do this with pixels, any value larger at least as large as half the square image’s dimensions will suffice (i.e., if the image is 300 pixels wide, border roundness must be at least 150px). 2 can be accomplished with :processed with Imgix (option: “Resize to fit the dimensions by cropping” checked) 1 can be accomplished by using an image element with fixed width unchecked and “Keep element proportions as the page is resized” checked… OR by just making your container fixed width. Here’s an example (using “fixed width” for #3) in my gibu app: ![image](https://us1.discourse-cdn.com/bubble/original/3X/2/1/215822a2e409cbd0cc1bc7f24fa0c806222cf8c2.png) … further down the image options: ![image](https://us1.discourse-cdn.com/bubble/original/3X/7/a/7a7dffdadf4b6997388c7b5c1d1fa791602dab26.png) ^^^ Answered. ---
**Author:** ![mukhtar007](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mukhtar007/32/38991_2.png) [@mukhtar007](https://forum.bubble.io/u/mukhtar007)\ **Post date:** [April 14, 2019, 9:43am UTC](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358/20 "2019-04-14T09:43:19Z")
I was just about to say this. You need to make the width and height of the element the same px. [Next page](https://forum.bubble.io/t/how-to-force-perfect-circular-shape-of-photo/54358.md?page=2)