How to Create Temporary User Avatars
Instead of using placeholder images for your user's profile photos, generate personalized avatars as soon as they sign up.
Last updated
Instead of using placeholder images for your user's profile photos, generate personalized avatars as soon as they sign up.
Last updated
Skill Level: Intermediate
Know the basics of Databases, Actions, and Screens and Components
Recognize that this implementation requires referencing the Image URL instead the Image property from the Adalo Database. Anywhere you want to display a placeholder, you must use URL as the source rather than the Database Image property.
Ensure you have a signup screen, login, screen, home screen, and profile screen in your app
You do not need a paid Adalo plan to implement this feature
In this walkthrough, we're going to set up some temporary avatars for your users so that each user has a unique and personalized avatar to start off with. It sounds fancy, but it's easier to do than you might think!
1.) First, let's add a Text property to our Users collection titled "Profile Pic URL". If you need help doing this, we suggest taking a look at our Database guide first.
2.) Then add an Image property to the Users collection as well named "Profile Pic". This will allow your users to upload their own photos to replace the temporary avatar image.
3.) Now that we have the properties in our database to hold the image information, let's add an action to the Home screen itself by clicking on the label for the screen in the top left of the screen's wireframe, then clicking on the Actions section dropdown.
4.) Underneath the Click Actions section, click + Add Action, then choose Update > Logged In User
5.) To generate our temporary avatar image, we're going to use a free service called Dicebear to generate a link to be stored in the "Profile Pic URL" field we created. While there are several options for types of avatars to generate (see the Learn More section below), we're going to use the initials option. To do this simply copy and paste the URL below into the "Profile Pic URL" field of the the Update action.
6.) This link by itself will not create the image we need just yet. We need to add in the personalized phrase to use, which in this case is just the user's full name. Let's append some magic text of the Logged In User's > Full Name to the end of the link along with .svg. Your update action should look like this:
7.) Next, we need this action to only happen if the user does not yet have a profile picture URL already. To do this, click on Show Advanced in the Update action, then set the When does this happen? dropdown to Sometimes
8.) In the This action will only happen if... dropdown choose More > Logged In User > Profile Pic URL. Ensure the next dropdown that appears is set to Equal to and leave the last dropown set to Empty. This will make sure that we only give the user a temporary profile pic if they don't have a profile picture yet.
10.) In the new form's settings, click on the Form section dropdown if not already selected and set the Which Data Collection dropdown to Users.
11.) Then in the What do you want the form to do? dropdown choose Update Logged in User.
12.) In the Fields section dropdown, remove Email, Password, and Profile Pic URL from the Visible Fields section by clicking on the trash can icon next to each property.
13.) Click on the Submit Button section dropdown, then click + Add Another Action to add another action to the submit button that will Update > Logged In User again.
14.) In the action's settings, let's use Magic Text to set the "Profile Pic URL" to be the Logged in User > Profile Pic > URL
15.) Now, anywhere you want to display the user's profile picture, be sure to set the Image source to URL in the dropdown and for the value, put in the Magic Text Logged in User's > Profile Pic URL
Now your users will immediately have a temporary, dynamic, and personalized avatar for their profile picture upon signup. If you would like to view or clone the app used to create this walkthrough, please click here.
The look and feel of the avatar is determined by whatever information you Magic Text into the link. For example, if you send the user's Full Name in the link such as Johnny Test, the initials returned will be JT.
You can customize what type of avatars are created simply by changing the option in the endpoint from initials to one of the other values in the table below. Dicebear also offers some customization options for each avatar type, but that is beyond the scope of this help guide. For more information, please visit the Dicebear website. To use these types in the table below simply replace initials used in Step 5 with the value from the table.
While most of the avatar types are free to use, it's important to pay attention to their licenses so that you can give credit to the artist if it is required.
Avatar Type | Sample |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!
Do you have a tutorial or help doc request? Let us know!
9.) Next, we need to make sure that if a user uploads a picture of their own, that the "Profile Pic URL" property is updated with the new URL. Add a form to the Profile screen in your app by clicking on the big plus sign in the top left of the Builder.
9.) Next, we need to make sure that if a user uploads a picture of their own, that the "Profile Pic URL" property is updated with the new URL. Add a form to the Profile screen in your app by clicking on the big plus sign in the top left of the editor.
.svg?alt=media&token=a004f1f5-87f6-4349-a130-c1728338cdc0)
