Skip to main content

Getting started with avatars

Learn how to display information about the current user and retrieve profile images from Gravatar.

Version: Cloud and 3.178 Edge

Use the Avatar and Avatar Group components to display profile information, and configure preloaded JavaScript libraries that enable you to retrieve profile images from Gravatar.

Demo

Features​

Key features of avatar components include:

  • Display profile image and details about a user or group of users.
  • Access to the Gravatar library.
  • Event handlers triggered on click.
  • Customizeable styles.

Specify content options​

The Content section of the Inspector contains settings that control the content of the component:

  • Image URL: The avatar image that you want to display. This value defaults to {{ current_user.profilePhotoUrl }}.
  • Fallback icon: The avatar icon content to use if the Image URL evaluates to null. Set a value dynamically, or select from Retool's library of icons.
  • Fallback text: The text to include inside the avatar icon if Image URL and Fallback icon both evaluate to null. If this looks like a full name, Retool sets this to the user's initials. For example, if the value of Fallback Text is Maya Chen, Retool displays MC on the avatar. This value defaults to {{ current_user.fullName }} and has a maximum length of two characters.

For Avatar Group, provide the image URLs and fallback texts in an array format.

Use the Add-ons section to configure a label or tooltip to accompany the avatar. Avatar Group does not support labels.

Reference current user information​

You can reference the current_user object in any of the Content settings to retrieve details about the user currently interacting with an app. For instance, {{ current_user.email }} returns their email address. This can be useful for logging user actions, such as updating an order or applying a discount.

The current_user object

Obtain profile images from Gravatar​

Gravatar is a free service for hosting profile images that are associated with your email addresses. Websites can retrieve the avatar image using the Gravatar API automatically without requiring users to upload profile images to multiple locations.

You can retrieve profile images from Gravatar using a URL and an email address. You accomplish this by preloading the blueimp-md5 JavaScript library and using it to generate the hash.

Preload the MD5 JavaScript library​

You can preload JavaScript libraries on a per-app basis or automatically for all apps within your organization. To preload a library within an app, open App settings and select Libraries.

Click Add new and enter the following URL:

https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js

This URL is the minified, UMD build of the libarary, retrieved from the blueimp-md5 listing. For more information, refer to Preload custom JavaScript code and libraries.

Display the Gravatar profile image​

Retrieve profile images using the URL https://www.gravatar.com/avatar/[hashedEmail]. You can generate the MD5 hash within the URL by calling md5() and providing an email address. For example, to obtain the current user's Gravatar profile image, use:

https://www.gravatar.com/avatar/{{ md5(current_user.email) }}
Demo

Configure user interaction​

Avatar Group does not support user interaction.

The Interaction section of the Inspector contains event handlers, which listen for and handle interactions with your components. For the Avatar component, events trigger when users click the Avatar.

Customize appearance​

You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector.

All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.

You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.

Use avatars in Tables​

The Table component supports an Avatar column format, which is commonly used to identify users.

Set the Mapped value setting to the user's name. Optionally create a Caption add-on to include more user information.

Set the Image and Fallback text in the same way that you would do so for the Avatar component. Refer to Specify content options for more information.