# How to Create Temporary User Avatars
*Skill Level: Intermediate*
## Before You Begin
* Know the basics of [Databases](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/database), [Actions](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/action-basics/action-basics), and [Screens](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/inserting-and-editing-screens) and [Components](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/design-basics)
* 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
## Walkthrough
{% tabs %}
{% tab title="Simple" %}
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](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/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](https://avatars.dicebear.com/) 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](#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.
```
https://avatars.dicebear.com/api/initials/
```
**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 Nam**e 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.
**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.
**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**
{% endtab %}
{% tab title="In-Depth" %}
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](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/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. Now your Users collection should look like this:
**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](https://avatars.dicebear.com/) 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, 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.
```
https://avatars.dicebear.com/api/initials/
```
**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 Nam**e 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.
**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.
**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**. Then, in the **What do you want the form to do?** dropdown choose **Update Logged in User.**
**11.)** 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.
**12.)** 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.
**13.)** 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**
**14.)** 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**
{% endtab %}
{% endtabs %}
## Example
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](https://previewer.adalo.com/8a572481-cc44-4259-a31d-d3961b313dda).
## Learn More
* 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](https://avatars.dicebear.com/). To use these types in the table below simply replace **`initials`** used in **Step 5** with the value from the table.
{% hint style="info" %}
While most of the avatar types are free to use, it's important to pay attention to their [licenses ](https://avatars.dicebear.com/licenses)so that you can give credit to the artist if it is required.
{% endhint %}
| Avatar Type | Sample |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`avataaars`** | 
|
| **`big-ears`** | 
|
| **`big-ears-neutral`** | .svg?alt=media&token=a004f1f5-87f6-4349-a130-c1728338cdc0)
|
| **`big-smile`** | 
|
| **`bottts`** | 
|
| **`croodles`** | 
|
| **`croodles-neutral`** | 
|
| **`gridy`** | 
|
| **`identicon`** | 
|
| **`initials`** | 
|
| **`jdenticon`** | 
|
| **`micah`** | 
|
| **`miniavs`** | 
|
| **`open-peeps`** | 
|
| **`personas`** | 
|
| **`pixel-art`** | 
|
| **`pixel-art-neutral`** | 
|
## Help
If you need additional help with this article, you can always ask in our[ community forum](https://forum.adalo.com/)! 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!](https://ideas.adalo.com/tutorial-requests)