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
- In your User’s table add a text field and title something similar to “User Record ID”
- Set a table rule upon a record being created (or create and edit) to set the “User Record ID” field to the “Record ID”
- Add a custom component to the Profile Page
- In the custom component you can use the following code:
{{#each records}}
<img style="max-width: 100%;" src="{{validateUser field_309 field_38}}"/>
{{/each}}
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,
Adam