Getting started with the Avatar component
Learn how to display information about the current user and retrieve profile images from Gravatar.
You can dynamically include details about the current user, such as their email address and name, anywhere in your apps. Use the Avatar component to display profile information, and configure preloaded JavaScript libraries that enable you to retrieve profile images from Gravatar.
Reference current user information
You can reference current_user 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.
Display profile images with the Avatar component
You can use the Avatar component to display information about any type of user, such as a customer.
The Avatar component enables you to display information as a formatted area with profile image. It is preconfigured to display information about the current user by default, such as {{ current_user.fullName }} and {{ current_user.email }}.
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 use retrieve profile images from Gravatar using a URL and an MD5-hashed 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 library's URL. Retool recommends you load the minified, UMD build, usually named with the format <library>.min.js. You can use cdnjs to look for libraries that can work in Retool. Navigate to the blueimp-md5 listing and copy the minified URL. For example:
https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js
Display the Gravatar profile image
All profile images are available 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. To obtain the current user's Gravatar profile image, use:
https://www.gravatar.com/avatar/{{ md5(current_user.email) }}