Change profile picture

Users can personalise the appearance of the User menu within the Top bar (see Working with the graphical user interface) by uploading a profile picture.

  • As long as no profile picture is stored (e.g. for Guest users as well who cannot upload a profile picture), the first character of the string that identifies the user appears instead (see User menu).

The Change profile picture function is available via the 'Settings' menu item in the User menu of the Top bar via a tab in the associated dialogue, provided the Role of session has the relevant permission (Administration/Accounts/Profile/Change profile picture):

The Profile picture tab in the Settings dialogue contains all the functions for managing the profile picture:

  • The square preview area appears empty if no profile picture is in use and none has been uploaded yet.

  • Uploading an image is made possible by a File element below, which can be used to upload an image file as the basis for the picture via drag & drop, or a selection window can be opened with a click.

NOTE◄ It is not possible to insert an image from the clipboard of the client operating system at this point.

The uploaded file appears immediately in the preview area, where it can be edited if required for use as a profile picture:

  • By default, the User menu displays a circular image section as the profile picture.

  • Unless the uploaded image has square proportions (width=length), only a section of the image will appear in the preview area.

  • The undimmed circular area in the centre symbolises the section of the overall image to be used as the profile image.

  • The image can be moved using drag & drop to customise the image section.

  • The slider below regulates the zoom level, which can also be changed using the mouse wheel if necessary.

  • The buttons to the right of the slider rotate the image in increments of 90° to the left or right.

images/download/attachments/201673616/image-2025-5-9_15-20-27-version-1-modificationdate-1746796826840-api-v2.png

images/download/attachments/201673616/image-2025-5-9_15-21-2-version-1-modificationdate-1746796861899-api-v2.png

Once the desired image section for the profile picture has been successfully ‘targeted’, the result can be adopted as the profile picture using the Set Button.

If a satisfactory result is not achieved, there are various actions to choose from:

  • The process can be cancelled completely by clicking on the X symbol at the top right of the dialogue (not shown in the picture) or by pressing the Esc key.

  • Clicking on the No profile picture Button not only cancels the current edit, but also removes any previously assigned profile picture.

  • Click on the X symbol in the file name below the preview to remove the image so that a new one can be uploaded.

images/download/attachments/201673616/image-2025-5-9_15-21-26-version-1-modificationdate-1746796886106-api-v2.png

NOTE◄ The image uploaded for editing is not completely uploaded to the Lobster Data Platform server when it is Set. Instead, only a square section of the image is transferred.

The screenshot on the right shows the preview that a user sees when they select the Change profile picture function again after it has been Set. It is therefore not possible to subsequently ‘zoom out’ in order to recover parts of the image that have been removed by ‘cropping’.

The file size is minimised and any content that is cut off remains ‘private’.

images/download/attachments/201673616/image-2025-5-9_14-33-35-version-1-modificationdate-1746794015262-api-v2.png

►NOTE◄ The Styles property avatarBorderRadius can be used to adjust the curve radius for the image section. The default value of 50% (radius: diagonal) defines a full circle. With a value of 0%, a square section is displayed. However, this setting cannot be defined individually when assigning the profile picture.

The following table compares screenshots with different radii. A circle is always displayed in the preview window if this setting is ignored.

Styles settings

Effective display in the User menu

avatarBorderRadius

20%
(rounded corners)

images/download/attachments/201673616/image-2025-5-9_14-24-26-version-1-modificationdate-1746793466260-api-v2.png

avatarBorderRadius

50%
(full circle)

images/download/attachments/201673616/image-2025-5-9_14-27-38-version-1-modificationdate-1746793658058-api-v2.png

Access to profile pictures

Typically, a user's profile picture only appears in the context of their login in the User menu in the Top bar of their session.

However, each profile picture is transferred to the avatar subdirectory in the public web folder (for Lobster Data Platform / Orchestration) when it is Set, so that it can be ‘reused’ quite easily.

  • On the one hand, the profile image file is assigned a systematic file name with the schemeuser_avatar_{username}.png.

  • On the other hand, the avatarURL field in the data of Users with a profile picture is filled with a link that can be used to find the picture.