Hello everyone,
I have an app that asks users to upload a profile picture, but do you know if there’s a way to auto assign them a random avatar if they choose not to upload a photo? Below is a screenshot of what I have.
Best,
Josh
i would recommend Alphabet Profile Images https://bubble.io/plugin/alphabet-profile-images-1479946498882x370599375215525900 by @louisadekoya
2 Likes
This is amazing, thank you! Do you know if there’s a way to assign a character/image in this same type of way?
nope and in my humble opinion I would recommend that approach. This plug-in has been used over 1900 times as you will see from the plug-in statistics… It’s a safe bet that this is best practice for the guiding principle you refer to… As you will know this based on how Google “bless them” approach this. For services such as LinkedIn they have a very non-descript humanoid type icon when their consumers do not upload a profile picture. You could opt for the same with the condition to show a generic profile image when there is no uploaded image present.
You can also use the “Adorable Avatars” plugin if you’re looking for something a bit more fun.
I also believe you can do it yourself by having a data set thats just profile pictures and then doing a search and taking a random entry. I’d have to look into that though as I’m not 100% sure
3 Likes
Do you know if I’d have the option for users to upload a headshot as well with this plugin?
You could use conditions to do this. You could have something like.
If the users signs up and current users profile picture is empty > make changes to thing > current user > profile picture > get data from api (adorable avatars - generate avatar)
on the other side, the adorable avatar wouldn’t be created created if the user adds a profile picture to begin with because it would check whether or not there is a profile picture available.
1 Like
If you need any further help i’d be more than happy to whip up a quick project that you can go into and look at
1 Like
That would be amazing if you can, thank you so much. A visual would be really helpful.
I’ve found that some users weren’t uploading photos, which I didn’t predict. Adding a randomized default avatar would look a lot better than just a blank space for a photo.
yeah no problem. ill throw one together quickly now and pm you the link in a bit
Another option for you that I’ve built is using a preset list of images as “defaults” for users that didn’t upload a profile picture during onboarding.
With this userTypes as per their onboarding: soccer player, lacrosse player, football player can all have a specific image that relates to them. This gives some personalization to the profile instead of being completely random in the event of no user photo.
Logic is similar to what @lockymadera shared above.
Good luck!
2 Likes
Yeah exactly! You can do it with a pre-built list of images too. I usually prefer these avatar generators because you can get more uniqueness out of them sometimes. I’d be wasting my app space if I tried to add hundreds of picture variants like these generators ahaha
The simplest way is to use this API
You can set the initials dynamically, also allows you to dynamically set background color.
I think that’s kinda what he’s doing. I think he was also looking for a way to implement it so that if a user doesn’t add a picture, the workflows would automate it and add one regardless. But yeah that api totally works too, you would just need to make an api call which is simple enough but I don’t think you want to be handling external api’s just yet. I know even my first api call was simple and it took me a quite a while to understand how it all worked.
Do you know if there’s a way to change the colors that are chosen when the alphabet profile images are created?
Hi @lockymadera, I’m looking to use a preset list of images as avatar “defaults”. How do I go about this process? Where do I upload the images? Any thoughts appreciated 
If you have only a few default avatars, you can set up conditions on the image itself…if current user’s image is empty and then upload the image
You can create an option set called ‘avatars’ and add all the images into that option set. You can display all of the images in a repeating group and then when the user chooses one of those as his avatar just have an image under the user data set for an avatar and set avatar to the chosen option.
1 Like
@lockymadera worked like a charm, thank you so much!!
I have one more issue around this: each of the avatars should only be used once (eg. excluded from the repeating group once it’s been chosen by a user). I’ve tried doing this by giving ‘avatars’ a property of ‘availability’ that is switched to ‘no’ after selection, but the workflow page doesn’t let me reference the relevant variables.
How would you go about this?
I don’t believe option sets can be changed in the front end. I believe they’re supposed to be static options.
To do this you’ll basically have to create a data set the same way you made the option set. Then you can change the variables of the data set.
Just for future reference. If you need to make a change to the state of something, a data set is the way to go, whereas an option set is best for things that wont be altered.