Improving Profile Pictures in Bubble.io
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 or any list of people in your Bubble app. This is particularly useful if you're building like a CRM or a dashboard because I'm going to show you how to add in profile pictures and the default placeholder profile picture using the initials of the contact or the person that you're adding the profile picture to.
Adding an Image Element
Let's get to work with this table and add in an image element. So I'm going to add in image and just make it square and add in a margin to the right. Perfect. And none of my contacts, I'll just show you my data structure for contacts. None of my contacts have an image field at the moment and none of them have any images uploaded. So first of all, I'm going to add in on contacts an image field. I call this profile pick. Set to image. Great. Good.
Using the Alphabet Profile Images Plugin
Okay. And so then I'm now going to use a plugin called alphabet profile images and this is a fantastic way of setting your app up so that users don't have to upload a profile image and you don't just end up with a lot of dead space. You still get color and you still get kind of that recognition when you look at a contact because like if the contact's name was Alfie, you're going to get A in the colored circle and every letter of the alphabet has got a slightly different color background and it's really quick and easy to use.
Implementing the Plugin
So I've added in the plugin and then going to add in the element into my row because each one has got to have a specific target text which it takes the first letter of. So this is my current group's contact first name and then in my image I can say conditional when current groups contacts profile picture is empty I can change the image source to the alphabet image and because the alphabet image element exists in each row when I refer to it it's referring to this contacts row and Bubble automatically makes all the rest dynamic.
Linking Rows to Contact Pages
So let's preview that. There you go you can see an N for Nick, a P for Peter, W for Wanda etc and I'm going to add in so my table here, okay I'm going to link my row through to a page, it's already set up a page called contact and the type of content is set to contact so this is set to display one contact from my database.
Setting Up Contact Page and Picture Uploader
So if I go back to my list of contacts I'm going to set up so that if the first name is clicked I'm going to go to my contact page and send through the contact whose row I've just clicked in and then on contact I'm going to add in a picture uploader, just make that a bit bigger, enter it and add in a button to save changes. I've got this set up in layout column, where did the button go? Oh the buttons gone outside of the group, okay right, made that last, send through it.
Creating a Workflow for Profile Picture Updates
Save changes, here's another tip for working with the picture uploader, if you set the dynamic image to be current cell's contacts profile pick, it then means that if a user visits this page they won't see just an image uploader or picture uploader, they would actually see the profile picture that's already been uploaded. So I'm going to add a workflow to here, make changes to a thing, current pages contact profile pick and then I link it to the picture uploader's value and then I'm also going to just add in a go-to action to take us right back to my contacts list.
Finalizing UI Improvements
So I'm going to go back to my live, well my dead version of my app, my preview and I'm going to click on say wonder and then I'm going to upload an image and I'm going to click save changes and then one last thing I have to do is on the image dynamic image I have to link this through to the profile picture field. Okay so you can see the profile picture is now one last UI tip for dealing with profile pictures is that you can see that it's not displayed very well.
Enhancing Profile Picture Display
So in terms of I want it in a circle and I want the face centered here's how to do that. So I'm going to under appearance, rescale I'm going to say zoom and then I'm going to add in a border radius, just a really high number. Try refreshing that again and then final trick is that I can use the process with Imx to also crop around face. We'll just see if this makes any difference. Oh it's cropped in way too close maybe if I change this back to rescale. I was hoping that it would focus in on the face not working. Let's have it zoom and let's put some padding just see if that works any better. Okay there we go that's perfect.
Conclusion
So there you have it there is a handful of tips for dealing with profile pictures in Bubble including how to add in a placeholder, how to make the image round, how to upload the image and get that to be done if we replaced if there is an image with the placeholder and vice versa and then how to center the image on the user.