Forum Documentation Showcase Pricing Learn more

How to force perfect circular shape of photo?

#22

Thanks for the clear compilation post. Gold.

For the cropping, it looks like you’re using imgx processing in the “browse for users” section. Have you had the chance to test the performance impact of processing in real time? @Jici mentionned that images might be cached by Bubble, and I read something similar elsewhere.

I’m forcing cropping on upload right now, but I will remove that extra step from my UX if it’s not that much slower to process imgx in real-time.

0 Likes

#23

It takes no discernible time. There’s really no reason not to do it if you need to!

1 Like

#24

I know that @keith has already addressed your concern, but I just wanted to emphasize that the Imgix service is optimized specifically for this type of thing. It works its magic wicked fast and caches the derivatives that it generates; but even the first time it’s served, there is no noticeable delay.

2 Likes

#25

@keith @shot Awesome thanks guys!

0 Likes

#26

Ah-hah! This was the problem! The roundness is working fine now that I changed it to image uploader. Thank you! I had switched from using the image uploader to the file uploader because I didn’t like that the image uploader also contained the photo. That seems weird to me and I don’t like it. Do you know if there is a workaround for that?

1 Like

#27

Use a shape element and set it to image and set the roundness to say 100 where you need to show the image, set options such as center image etc on the shape element. User’s can upload images in any orientation, landscape or portrait does not matter, it will be perfectly round where its shown… Hope this helps

0 Likes

#28

Yes, easily. Add a workflow on input change.

image

Store the picture uploader’s value to your database within the workflow, then clear the input like this:
image
image

It will no longer show the picture once uploaded. I usually put the uploader in a group and have the background picture of the group be the picture that was uploaded. I style the uploader to be “invisible” (no bg, no borders, no placeholder etc…) but to still be visible.

The ux feels natural because when the user clicks on their “picture” they’re actually clicking on the uploader and can instantly upload a picture. Hope this helps.

1 Like