How to set a default avatar for your member directory

If you have a member directory on your site and would like to display a default avatar for those members who haven’t gotten around to setting their own yet, then consider the following.

SETTING UP THE SYSTEM PROPERTIES TABLE

  1. Create a new table in your base called “System Properties”. This table can contain any number of Name-Value pairs. Make sure it has the default “Name” and “Attachment” fields.

  2. Add a new record to the table where Name=“Default Avatar”, and Attachment is an image of your choice. (I used Canva to create mine).

2021-10-02_09-34-19

Alternatively, if you have a “Gender” field in your member directory, you could leverage that value to look up the “Male” avatar or “Female” avatar based on what the member selected.

Tip: Since this avatar image will be display dozens of times on your page, consider optimizing it with a service such as TinyPNG before you upload it into the Attachment field.

SETTING UP THE MEMBER DIRECTORY

  1. In your member directory table, create an Attachment field called “Avatar”.

  2. Create a new view on your member table called “No Avatar” with a filter where Avatar is empty. This will be the trigger for the automation (below). Basically, if the user adds their own avatar then deletes it later, the default will always be there so your directory page doesn’t have a bunch of empty spaces where avatars should be!

2021-10-02_09-45-06

SETTING UP THE AUTOMATION

Now the fun part!

When a member entry enters the “No Avatar” view, the automation will search the System Properties table for “Default Avatar”. Then it will update the member’s Avatar with the image stored in the Attachment field from the System Properties table.

2021-10-02_09-49-55-2

2021-10-02_09-50-34-2

END RESULT
2021-10-02_10-03-03

If you use this technique, please share any issues you may encounter. This is a new automation for me and may contain some unforeseen gaps.

-NoCoderAZ

Update: I’ve found that by using the “No Avatar” view, the response is too slow and will leave the user confused. After editing their profile and change their Avatar to something besides the default, then save the changes, the page continues to display the default Avatar! You have to refresh the page to see the update.

So, I’m not using the view anymore and instead modified the Automation trigger to set the default Avatar whenever the Avatar attachment field is empty.

2021-10-04_08-31-04

It’s still not a perfect solution due to the fact that Airtable does not have an “Image” field to allow only ONE image. While editing a profile, if the user dumps in a bunch of images in the Avatar field and doesn’t remove the default one, it will no doubt trigger support emails! (Sigh)

-NoCoderAZ

Any updates on this? I want to show the default avatar until the user uploads his own avatar/profile pic