Bubble UI Tips - Better Profile Pictures
In this Bubble tutorial we demonstrate 3 UI tips for improving your no-code Bubble app all centered around Profile Pictures. We use the Alphabet Profile Images plugin to add a placeholder thumbnail for conacts/users without an uploaded image, we show how you can quickly add the Picture Uploader to upload a new profile image to a Contact/User and we use Imgix to Auto crop around the face of the profile picture.
Upgrade your UI: Learn how to add profile pictures and alphabet profile images to your Bubble app's user lists.
Boost your CRM: Discover the simple trick to enhance your custom CRM with dynamic profile pictures and placeholders.
Master the art of centering profile images and creating rounded avatars in Bubble - without plugins!
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.