New Features in WoltLab Suite 6.2: Overhauled User Profile and Cropping of Uploaded Images

Why a Redesign Was Necessary

Over the years, more and more functions, displays, and information have accumulated in the profile area. What was once clear and concise has, over time, become a “wall of text” below the user name. In addition, there were a couple design flaws:

• The cover photo was too short and looked completely different on mobile devices than on desktop computers.
• The username was placed directly over the image, which often led to readability issues.
• Avatars and profile pictures could not be edited during upload—a circumstance that is hardly acceptable today.

New Page Header: Better Overview and Improved Readability

New page header in user profiles

The user profile has undergone a comprehensive visual and functional overhaul in WoltLab Suite 6.2:

• Cover image: The height has been adjusted to show more of the image. The aspect ratio has been unified and results in a more consistent appearance on all devices.
• Username: This is no longer overlayed on top of the image, but is displayed in a separate header for better readability and a clearer structure.
• Trophies: These have been moved to their own box in the right-hand sidebar. This means they remain visible, but no longer clutter the page header with additional icons. Due to their eye-catching design, they also did not fit in with the overall look of the surrounding information.
• New layout of information:
  • Statistical values (such as posts, likes, etc.) appear as discreet buttons so that they are clearly recognizable as clickable functions.
  • Additional information (such as location or interests) is listed compactly with matching icons, which saves space and makes it easier to read.

Upload Images like in Modern Apps – with Direct Editing

Cropping of uploaded images

A major step forward is the introduction of modern image editing when uploading avatars and profile pictures. Until now, images were often automatically cropped or scaled – with sometimes unsatisfactory results, especially on mobile devices.

New in WoltLab Suite 6.2:

• Cropping directly during upload: If an image is uploaded that does not match the desired aspect ratio, it can be cropped immediately.
• The image is automatically scaled to fit the maximum allowed size and fit neatly into the space.
• The desired image section can be moved using drag & drop to highlight the important scene.
• The size of the section can be adjusted as long as it does not fall below a minimum size – particularly practical for smartphone users with high-resolution cameras.

Technical Implementation for Developers

The basis for this new image editing feature is a revised upload pipeline:

• The new functionality is an opt-in feature via the FileProcessor – without any changes to templates or JavaScript.
• Developers can flexibly define minimum and maximum sizes as well as aspect ratios – entirely according to their needs.

The new profile header can be expanded via events, e.g., for additional statistics or interactive elements.

With these innovations, we are bringing the user profile up to date – visually clearer, technically more flexible, and significantly more user-friendly. The new structure provides clarity, and the integrated image editing finally offers the level of control that users expect today. An update that is impressive – in the truest sense of the word.