Integrating a User Image Feature to Replace Avatars

  • Mis à jour le Dec 13, 2024
  • Publié le Oct 25, 2024
  • 3 minute(s) lue(s)
Prev Next
This content is currently unavailable in French (Canada). You are viewing the default (English) version.

Introduction

Create a feature allowing users to add a picture to their user profile. Apply a restriction to that feature ensuring that only the user of that profile can add a picture. Additionally, the user picture will be replacing the user avatar in the top right corner of the application, as well as in the drawer menu.

Step-by-step instructions

1. Creating the User Image Field in the User Aggregate

Start by creating the field “userImage”, of type “image”, under the user Aggregate.

2. Setting Up the Image Update Command

To allow users to replace the placeholder image (that will be added in a later step) by their own, create an image update command, using “add update command” from the command folder under the user Aggregate. In this example, it was named “modifyUserImage” and the event type was changed to “USER_IMAGE_UPDATED”. In the second step of the wizard, only add the field created in step 1 and leave it as non-required.

3. Adding the Image Component to the User Profile Page

Drag and drop an “image” component from the toolbox, next to the user’s name in a profile page. From the “attribute” tab, change the souce to “field” and select the “userImage” field.

4. Assigning a Placeholder and Setting Image Attributes

Still from the “attribute” tab, add a placeholder image and ensure that the command created at step 2 is selected in the “update command” section of the “attribute” tab.

Apply a round border and adjust the size of the image to 60px in both max width and height, as well as 100% in “width” and “fit content” in “height”.

Then, on the box containing the image and username, add 0.8em “item spacing” and apply an “horizontal center align” the box content.

5. Restricting Image Updates to the Profile Owner

The next step will be to apply a restriction so the feature can only be used by the user of that profile. Select the command created in step 2 and open the “properties” panel. Add a precondition of “id” name, with the operator set to “equal” and the value (JS) as “currentUser.id”. Go Live to test it in 2 users, your own and another one.

6. Replacing the Avatar with User Image in the Application Layout

Let’s see how to apply the user’s image instead of the user’s avatar, in the top right corner of the application. Start by switching to “layout designer” mode. From the Structure panel, select the “side panel” and apply a “set component data” (JS): currentUser.

For clarity purposes, the 2 boxes containing “avatar” were renamed “inside” and “outside”. In this step, we are dealing with the “outside” box image. Drag and drop an “image” component from the toolbox, right under the “avatar” component in the “outside” box, set the source to “field” and select “userImage”. Then, remove the “update command” automatically added.

Delete the default style and apply a round border. Then, add sizing of 45px in both “height” and “width” and in “more” set “mouse cursor” to “pointer”.

7. Applying Show/Hide Behavior Based on Image Presence

Add a “show/hide” behavior to the image component. Set a precondition with “userImage” “is not empty”. Add the same behaviour to the “avatar” component but with “is empty” in its precondition. This should hide the avatar, if you had previously selected an image for your user.

8. Customizing the Drawer Menu with the User Image and Name

Double click on the image to open the drawer menu. Select the “avatar” from the “inside” box and disable “show name” from the “attribute” tab. Then, drag and drop a “text” component next to the “avatar”.

a. From the “attribute” tab, set the value to “field” “name”.

b. Apply a horizontal wrap to the “avatar” and “text” component and apply a “horizontal center align” to the box. Then, add 1em in “item spacing”.

c. Copy the image component from the “outside” box and paste it in the “inside” one and add a “show/hide” behavior to the “avatar” component and set a precondition with “userImage” “is empty”.

Conclusion

By integrating a user image feature, users can personalize their profiles by adding their own images. This image replaces the default avatar throughout the application, enhancing user experience. Implementing behaviors like show/hide ensures smooth transitions between avatars and user images, providing a cleaner, more professional interface.