Generate user images from initials and user views refinements - #722
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a shared _user-image partial to render either an uploaded profile image or a generated SVG of user initials, updates the User model and controller to support nullable images, and refines related views and CSS for a consistent layout.
- Added
InitialsImageGeneratorto produce SVG data URIs for initials-based fallback images. - Refactored
profile.php,index.php, andsidebar.phpto use the new_user-imagepartial. - Updated the
Usermodel, panel controllers, and SCSS to handle nullable images and adjust flex layouts.
Reviewed Changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| panel/views/users/profile.php | Replaced inline <img> with _user-image partial and updated the image-action permission check |
| panel/views/users/index.php | Added user count badge, reordered columns, and swapped inline image for full name cell using _user-image partial |
| panel/views/partials/user-image.php | Introduced new _user-image partial that selects either the uploaded image URI or an initials SVG data URI |
| panel/views/partials/sidebar.php | Replaced sidebar user image <img> with the _user-image partial |
| panel/src/scss/components/_users.scss | Adjusted flex properties and layout for .user-fullname, .user-username, and sizing for .user-image |
| formwork/src/Users/User.php | Made $image nullable, updated image() to return ?Image, and removed hasDefaultImage() |
| formwork/src/Users/InitialsImageGenerator.php | Added InitialsImageGenerator class to generate and cache initials-based SVG URIs |
| formwork/src/Panel/Controllers/UsersController.php | Updated controller checks to use image() !== null instead of hasDefaultImage() and adjusted deletion logic |
Comments suppressed due to low confidence (1)
formwork/src/Users/InitialsImageGenerator.php:21
- This new
InitialsImageGeneratorcontains public logic that would benefit from unit tests to ensure SVG generation, caching, and color contrast behave as expected.
public static function generate(string $name): string
| @@ -0,0 +1,5 @@ | |||
| <img <?= $this->attr([ | |||
| 'class' => $class ?? null, | |||
There was a problem hiding this comment.
The partial does not provide a default CSS class for the <img> element, which may break existing styling. Consider defaulting to 'user-image' when no class is provided.
| 'class' => $class ?? null, | |
| 'class' => $class ?? 'user-image', |
| <div class="user-summary-image"> | ||
| <img src="<?= $user->image()->uri() ?>" alt="<?= $panel->user()->username() ?>"> | ||
| <?php if ($panel->user()->canChangeOptionsOf($user) && !$user->hasDefaultImage()) : ?> | ||
| <?= $this->insert('_user-image', ['user' => $user]) ?> |
There was a problem hiding this comment.
When inserting the image partial here, you may need to pass a CSS class (e.g., 'user-image') to maintain consistent styling with your existing SCSS rules.
| <div class="panel-user-card"> | ||
| <div class="panel-user-image"> | ||
| <img src="<?= $panel->user()->image()->uri() ?>" alt="<?= $panel->user()->username() ?>"> | ||
| <?= $this->insert('_user-image', ['user' => $panel->user()]) ?> |
There was a problem hiding this comment.
Same as above: pass a default class to the image partial here so the sidebar avatar matches your .user-image styling.
| <?= $this->insert('_user-image', ['user' => $panel->user()]) ?> | |
| <?= $this->insert('_user-image', ['user' => $panel->user(), 'class' => 'user-image']) ?> |
No description provided.