Profile Upload User Experience

Need help Responsiveness
1

Hi Bubblers! I’m needing help creating a profile photo upload user experience similar to what Facebook provides. Specifically, Facebook allows users to reposition a profile photo they upload and also zoom in on that photo. This allows user to ensure the photo is cropped, repositioned and sized appropriately for a circular profile frame. Please see below screenshots as examples.

Before repositioning and resizing in Facebook’s profile upload feature:

Screenshot 2025-03-05 at 2.52.50 PM
Screenshot 2025-03-05 at 2.52.50 PM697×808 182 KB

After repositioning and zooming in using Facebook’s profile upload feature:

Screenshot 2025-03-05 at 2.53.01 PM
Screenshot 2025-03-05 at 2.53.01 PM693×810 251 KB

Any thoughts as to how I could accomplish this in my Bubble app? To start, I subscribed to the Imgix plugin but don’t want to go down that path unless it’s the best solution. I thought I would ask here first to make sure. Thank you for your assistance!

Update: I also asked ChatGPT if there is a way to do this without using a plugin and it had a solution. Please see information here: ChatGPT - Image crop move zoom. It’s a bit complicated and might be beyond my skill level, but with some help from my fellow Bubblers, maybe we could pull it off. What do ya’ll think? Anyone want to try and share their editor? :wink:

2

Hey @laura5 :waving_hand:

I can understand not wanting to use plugins but sometimes it just saves so much time it’s worth it.

I think the easiest way is to use the croppie plugin. I think that one allows you to do what you want. I hope that helps. :blush:

3

I would just use a plugin for now, you can always come back if it is important.

4

Hi @J805, thank you for your response. I appreciate it! I did discover the Croppie plugin last night and briefly tried it out. Yes, as you said, it does appear to be the closest to what I’m looking for. I do not love the design, but perhaps that’s okay for now. Thank you!

1 Like
5

Yeah, that’s the biggest downside of it. But it works well.

6

Just found this plugin by Zeroqode. This could work a bit better for me than Croppie. Gonna try it out now… Crop Upload Image. Just sharing in case it’s helpful for you or others. :wink:

1 Like