Improving Profile Upload User Experience

[laura1]

Hi Zeroqode,

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:

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

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.

Lastly, for reference, this is what I have built so far in my Bubble app. The popup pictured in the screenshot below uses the Bubble image uploader. However, users cannot center images within the image frame, hence, unless a user picks a photo where their face is centered, their profile image won’t look great. As you can see in the user profile photo picture on the left, the user’s face is in the right side of the frame, not centered as I would like it to be. It would also be nice if this user could have zoomed in on their face a bit more, effectively cropping out excess noise (people, etc.) in their profile photo.

Thank you for your help!

Warmly,

Laura

P.S. I was reading the documentation for the Imgix plugin - do I really have to create an S3 bucket on AWS or similar or can I just use Bubble’s database?

[laura1]

Follow up question – I noticed that in the Bubble editor for the Imgix plugin, there is a group with many features including “crop faces”. Please see below. (Link to editor for reference.)

What I see when I preview the page:

As shown, the group that allows you to crop faces, etc. is not visible when I preview the page. Please help! I would love to try out this feature.

Thank you.

Laura

[dorel]

Hi @laura1,

Great to hear from you, and thanks for reaching out!

I have two plugin recommendations that I’ve seen offer circular crop functionality, instead of the default rectangle:

1. "Crop Upload Image" from our library. You can check out the demo here and the documentation here. This plugin offers the circle crop functionality, with all the actions outside the main element, so you can customize it further to suit your needs.
2. "Image Editor" by another developer, which you can find here. It also includes a circle crop feature, but it comes with its own dedicated UI.

Feel free to explore these plugins, and you can also check the Bubble Marketplace for any other plugins that might better fit your use case!

As for the Imgix plugin, it works with multiple sources, including AWS and Bubble uploaded files. It’s not necessary to link it to an AWS S3 bucket. Regarding the “Crop Faces” feature, if you click on the “Add color to the image” dropdown, the button will become visible – like this.

Let me know if you need more information!

Best regards

Browse all Zeroqode Plugins for Bubble

[laura1]

Hi @dorel,

Thank you so much for your prompt response. I greatly appreciate it.

I took a peek at the “Crop Upload Image” plugin you suggested and it’s working great for my purposes. The only thing is I wish that it would give me the option to set the frame before the photo uploads. The default frame is a rectangle without any constrained proportions. To get around this, I have to ask my users to click on a button to change the cropping frame. It would be a better user experience if I could skip this step. My users are probably like, “why do you even present a frame type that you don’t want me to use?” .

Please see below screenshots for reference.

What the frame looks like when the image first loads in the cropping tool.

What the image looks like after I have them click on the “Create circular frame” button which sets the frame to ellipse and 1:1 ratio in a backend workflow. (You’ll also see some other instructions I included below the image after they click on the button so the user would know how to use the various cropping/photo resizing tools.)

Thank you for your help! Other than the default cropping frame being a different shape than what I want, the plugin is working great!

Warmly,

Laura

[laura1]

@dorel, If there were a way to disable automatic photo uploading too, that would be helpful. I would like the photo to only upload after users click a button. This is because as the plugin is working for me now, I need a trigger for a group that contains the button to create a circular frame along with the instructions. (I tried having that group show up right away along with the plugin element but it was strange having it present before a photo was even uploaded.)

Basically, I want to present more information once a photo is uploaded but since there is no trigger I can access that tells me when a photo is uploaded, I’m having a little trouble creating the perfect UI.

Of course, this need is not necessary if I am able to change the default frame to an ellipse with a 1:1 ratio.

Thanks again!

[dorel]

Hi @laura1,

I’m glad to hear that our plugin mostly fits your needs!

To make the crop round instantly, without the user needing to press another button to make it circular, you can add the action when the crop element is shown or when the image is uploaded in the element. As you can see on my test page, I’ve added the action at page load, which immediately makes the crop shape circular. Let me know if this works for you

Could you please clarify what you mean by “automatic uploading”? The plugin uploads the image to the database only after the Save action is triggered. I’m also not entirely clear on your second concern - could you provide more details so I can give you accurate information or suggestions? I’d really appreciate it!

Best regards

Browse all Zeroqode Plugins for Bubble

[laura1]

@dorel , Thank you so much. That was a really helpful suggestion. I implemented it and it worked for me. Now the image input loads with a circular frame instead of a rectangular frame, which is exactly what I want!

My second question was how to access the action of a photo being uploaded. I would like to trigger my group called “Editing Instructions” to show once a photo is uploaded. Please see below screenshot for a visual reference. The group I am referring to is selected in the screenshot. Right now it shows on page load (in this case when the popup shows), but I would like to change this to showing this group when a photo is uploaded and not before.

BTW, I noticed a 2.5 second delay between when the CropUploaded loads and when a user is able to upload a photo. Do you notice this as well? I added a loading element that hides the text within the CropUploader. This loading element disappears after 2.5 seconds and then the user sees the text instruction to click and upload a photo and is able do so. Before this change, when the popup showed with the CropUploader element inside, I was clicking on the upload text instructions within the Cropuploader and nothing was happening for the first 2.5 seconds which, as a user, would make me think the photo uploader was broken initially.

I also added this loading element before showing a preview of the user’s cropped photo.

Please see demo here to check everything out: Thrive on a Dime.

BTW, this doesn’t have to do with your plugin, but do you know how to add margin to a popup? I don’t see margin as an option within the element editor for the popup. As you can see in the screenshot below, my popup gets pretty long and I would love some margin at the bottom.

Thank you for your help!

Warmly,

Laura

[laura1]

Nevermind, I figured how to add margin in a hacky way. I added a group inside the popup that I called ‘popup margins’ and added margin there. All the popup content is contained within this group. I also removed the flat color, outset, corner rounding, etc. from the popup itself and added this to the margin group. So this works.

One more reason that it would be great to access the photo uploaded action - if users click ‘generate photo’ before there is actually a photo, there is a system error and none of the buttons load and the users has to refresh the page. Please see error below:

To hedge against this, I would like to make the ‘Generate Profile Photo’ button not clickable until there is a photo loaded into the the CropUploader. Or even better would be to hide the whole ‘Editing Options’ group which contains the button until a photo is uploaded. Do you have any suggestions as to how to accomplish this? Thanks again!

Warmly,

Laura

[dorel]

Hi @laura1,

My apologies for the delayed reply over the weekend I’m so happy to hear that my suggestions have been helpful

Regarding your concerns about the instructions being visible when the image is uploaded and other behaviors, the plugin element has a state called “Loaded,” which indicates whether the image has been successfully loaded into the cropping tool. The state will show “yes” when an image is uploaded into the cropper. You can use this state to hide/show elements or add any other constraints.

Hope this helps you integrate the plugin smoothly and efficiently!

Best regards

Browse all Zeroqode Plugins for Bubble

[laura1]

Hi @dorel,

Thank you for your response. Where do I find the “loaded” state? How can I access it? I don’t see any actions called “loaded” or similar in the workflow editor. I only see “When a CropUpload is done”. Please see screenshot below.

Please send screenshots if they would help, and thank you in advance for the additional information.

Be well,

Laura

[dorel]

Hi @laura1,

Sure! The state comes from the plugin element. Just like you would add the input’s value into an action, the Value you select from the input element is considered a state.

In the conditionals tab of the button, you can use the following condition: “CropUpload A’s loaded is no.” You can also refer to this screenshot for an example.

Hope this helped! Let me know if you have any other questions

Best regards

Browse all Zeroqode Plugins for Bubble

[laura1]

Hi @dorel,

Thank you for the explanation. I implemented the “CropUpload A’s loaded is yes” condition, then “This element is visible” to the ‘Group Editing Instructions’ and it worked! Now this group only shows once an image has been uploaded. Thank you so much!

Warmly,

Laura

[dorel]

Hi @laura1,

I’m thrilled to hear everything is running smoothly! It’s always a pleasure to help, and we truly appreciate having you as part of our community

If you’ve been enjoying our plugins, we’d love to hear your thoughts! Your feedback not only brightens our day but also helps others in the Bubble community discover the best tools for their projects. Leaving a quick 5-star review takes just a minute and makes a world of difference. Simply head to the Plugins tab in the Bubble editor, search for the plugin, and rate it!

Want to help even more? Share your experience on:

• Zeroqode Reviews
• G2
• Clutch
• Trustpilot

Your support means everything to us and helps us continue building awesome products for you! Thanks so much, and have an amazing weekend

Warmest regards

Browse all Zeroqode Plugins for Bubble