UI Tips: Improving User Interface with Profile Pictures in Bubble

In this Bubble tutorial video, I'm going to show you how you can make a simple UI improvement to a list of users or a list of contacts in your Bubble app. This tip is particularly useful if you're building a CRM or a dashboard.

Adding Placeholder Profile Pictures

To begin, let's add an image element to our table. Make the image square and add a margin to the right. Currently, none of our contacts have profile pictures uploaded. To fix this, we'll first add an image field to the contacts data structure called "profile pic".

Next, we'll use a plugin called Alphabet Profile Images. By setting up your app with this plugin, users don't have to upload a profile image, yet you still get a colorful and recognizable representation of each contact. Each letter of the alphabet is assigned a background color, making it quick and easy to identify contacts at a glance.

In each row of our table, we'll add the Alphabet Profile Images element and set the target text to the first letter of the contact's name. Then, we can set a conditional statement for the image element. If the contact's profile picture is empty, we'll change the image source to the alphabet image. Bubble automatically makes all the other rows dynamic, so each contact gets their respective placeholder profile picture.

Linking to Contact Pages and Adding Image Upload

To make our table interactive, we can link each row to a contact page. Set up a page called "contact" and configure the type of content to display one contact from your database. When a first name in the table is clicked, navigate to the contact page and send through the corresponding contact.

On the contact page, we can then add a picture uploader element. Set the dynamic image to the current contact's profile pick field. This way, if a profile picture is already uploaded, it will be visible upon visiting the page. Add a "Save Changes" button and set up a workflow to save the uploaded image to the contact's profile pick field.

Lastly, we can add a "Go Back" action to return to the list of contacts after making changes.

Styling Profile Pictures

To improve the display of profile pictures, we can make them appear as circles with the face centered. Under the "Appearance" tab of the image element, apply the following settings:

• Rescale: Set to zoom
• Border radius: Set to a high number

Refresh the page to see the changes. If needed, we can use the process with imgix to crop the image around the face. Adjust the settings until the desired appearance is achieved.

In conclusion, these UI tips for dealing with profile pictures in Bubble allow you to add placeholder images, make pictures round, enable image uploads, and center the images on the user. Implement these tips to enhance the user experience of your Bubble app.