Show Profile Picture on Profile Page - Custom Component

Greetings all-
The following will provide you a starting point to show a profile picture/image on a profile page with the ability to size according to your own CSS. This will use the following:

Custom Component
Handlebar js Helper

  1. In your User’s table add a text field and title something similar to “User Record ID”
  2. Set a table rule upon a record being created (or create and edit) to set the “User Record ID” field to the “Record ID”
  3. Add a custom component to the Profile Page
  4. In the custom component you can use the following code:
{{#each records}}

    <img style="max-width: 100%;" src="{{validateUser field_309 field_38}}"/>


NOTE: Change the “field_309” (User Record ID) and “field_38” (Profile Picture) to the correct field numbers in your table.

In the Javascript tab of your Profile page (NOT THE CUSTOM COMPONENT JAVASCRIPT TAB), use the following handlebar.js Helper code:

var userId = "{loggedInUser.User Record ID}";

Handlebars.registerHelper('validateUser', function(user, image) {
    if(user == userId) {
        return image;

NOTE: Change the “User Record ID” to the same field name (not the field slug/number) that you created in your Users table that holds the User’s Record ID that was trigged by the table rule you set.

This is all was created by @kruizf201 and I thank him for his mastery of all things code. Well done Kevin!

Hope this helps,


You are always welcome @SafetyUniversity !

1 Like

This is awesome! Thanks for sharing!