Profile pictures
1. What this page does
The Profile pictures page manages the collection of avatar images available for players to select as their profile picture in the lobby. Use this page to upload new images, reorder display sequence, switch avatars on or off, and view how many players are currently using each picture. It is intended for administrators and site designers managing brand graphics.
2. Before you start
- Required permissions: You must have the 'Players' permission to view, upload, reorder, or delete profile pictures.
- Things to prepare:
- Image files to upload: PNG, JPG, or WEBP under 2MB (recommended square dimensions 400 × 400 or 512 × 512 pixels; the system crops them into circles).
- Core system rules:
- At least 1 profile picture must remain active at all times so that all players always have a display picture. The system will not allow turning off the last active image.
- Default system pictures can be turned on or off, but cannot be deleted. Custom uploads can be deleted once switched off.
3. Screen layout
When you open this page, you will see the following key sections from top to bottom:
- Page header: Shows the page title Profile pictures, a brief summary, a refresh button, and the Add picture button.
- Filter tabs: 4 tabs: All, On, Off, and Deleted.
- Info note: Explains active avatar rules and automatic player reassignment.
- Counter bar: Shows display counts (e.g.
Showing 12 / 50 pictures). - Avatar card grid: Shows cards ordered by sort rank. Each card displays sequence number, kind badge, circular preview, wearer count, last modified date/author, arrow shift buttons, delete button, and on/off toggle.
4. Search and filters
| Field / Filter | Type | How to use | Result |
|---|---|---|---|
| Filter tabs | Tab buttons | Select: All, On, Off, or Deleted | Filters cards by status (reordering is only permitted in the "All" tab) |
| Refresh | Button (spinning arrows) | Press to reload the latest pictures and player counts | Re-fetches the avatar grid immediately |
5. Data table
Avatars are presented in a responsive card grid. Each card displays the following information and controls:
Elements on each avatar card
| Element | What you see | What it means | Badges or symbols |
|---|---|---|---|
| Order number | Top left circle badge (e.g. 1, 2) | Display order sequence in the player lobby | Blue circle when active, gray when off |
| Kind badge | Top right label | Origin of the avatar image | Blue badge = Default, Purple badge = Site upload |
| Image preview | Center circle image | How the avatar looks to players | Circular thumbnail (desaturated if disabled) |
| Wearer count | Person icon with number (e.g. 1,250 players) | Number of players currently wearing this avatar | Text counter |
| Last modified | Date, time, and admin name | Timestamp and author of the most recent change | Small gray metadata line |
| Order arrows | Arrow buttons < (earlier) and > (later) | Shift position one step up or down | Gray arrow buttons (active in "All" tab) |
| Delete | Trash icon | Permanently deletes this custom upload | Red icon (visible only on disabled site uploads) |
| Status switch | Toggle switch at bottom right | Enables or disables player selection of this picture | Green switch = On, Gray switch = Off |
6. Step by step
1. Adding a new profile picture
- Go to Players > Profile pictures from the left navigation menu.
- Press the Add picture button in the upper right corner.
- In the dialog, click the dropzone or drag and drop an image file (PNG, JPG, WEBP).
- Inspect the previews across lobby sizes (96px, 64px, 40px), cropped into circles.
- If satisfied with the preview, press Add picture.
- The new avatar is added as the last item in the list.
2. Reordering pictures
- Select the All tab at the top (arrow buttons are disabled in filtered views).
- Locate the avatar card you want to move.
- Press the arrow buttons:
- Press
<to move it earlier (appears higher in the lobby). - Press
>to move it later (appears lower in the lobby).
- Press
- The system updates and saves the sequence immediately.
3. Toggling an avatar on or off
- Locate the switch at the bottom right of the target avatar card.
- Toggle the switch:
- Switch to ON (Green) to allow players to choose it.
- Switch to OFF (Gray) to hide it from selection.
- If players are currently wearing that avatar, a confirmation dialog appears warning that they will be migrated to the first active avatar. Confirm to proceed.
4. Deleting an avatar
- Switch the avatar to OFF (Gray) first (active avatars do not display a delete button).
- Press the Delete button (red trash icon) on the card.
- In the confirmation dialog, press confirm delete.
- The avatar is archived into the Deleted tab.
7. Edit or add page
The Add picture dialog includes the following controls:
| Element | Required? | What to select | Example | Validation rules |
|---|---|---|---|---|
| File dropzone | Required | Image file from your computer | avatar-01.png | PNG, JPG, or WEBP up to 2MB |
| 3-size circular preview | Automatic | Previews at 96px, 64px, and 40px | Circular colored preview | Rendered automatically upon file selection |
| Change button | Button | Press to choose a different image file | - | Available anytime before confirming |
8. Popups and modals
1. Popup window: Add picture
- Triggered by: Pressing Add picture in the top right corner.
- What you see: File dropzone, 3-size circular preview, and confirm/cancel buttons.
- Action required: Choose a valid file, review circular framing, and press Add picture.
- Outcome: Uploads and activates the new avatar in the library.
2. Popup window: Deactivate worn avatar confirmation
- Triggered by: Switching off an avatar currently worn by 1 or more players.
- What you see: Warning stating the count of affected players and where they will be reassigned.
- Action required: Read carefully and press confirm (or cancel).
- Outcome: Switches the avatar off and migrates players to the primary active avatar.
3. Popup window: Delete avatar confirmation
- Triggered by: Pressing the trash icon on a disabled site avatar.
- What you see: Confirmation prompt to delete the picture.
- Action required: Press Confirm delete (or cancel).
- Outcome: Removes the avatar from active rotation and archives it into Deleted.
9. Statuses and badges
| Badge / Label | Color | Meaning | Action required |
|---|---|---|---|
| On | Green | Available for players to select in the lobby | Operates normally |
| Off | Gray | Hidden from selection; players cannot choose it | Can be re-enabled or deleted |
| Default | Blue | Standard system avatar provided by Winnova | Can toggle on/off, but cannot delete |
| Site upload | Purple | Custom avatar uploaded by your team | Can be toggled, reordered, and deleted |
| Deleted | Gray / Red | Archived picture removed from service | Audit history in the Deleted tab |
10. Common questions and troubleshooting
- Why are the arrow buttons
<and>disabled? Reordering is only allowed in the All tab. If you are viewing the "On" or "Off" tabs, switch to "All" to unlock the arrows. - Why can't I switch off an avatar? At least 1 avatar must remain active at all times. If this is the only active avatar on your site, turn on another avatar first before disabling this one.
- Why can't I find the delete button on an avatar? Check two points:
- Default system avatars (Blue badge) cannot be deleted. Only site uploads (Purple badge) can be deleted.
- The avatar must be switched Off (Gray) before the trash icon appears.
- Why did upload fail? Check that your image file is PNG, JPG, or WEBP, and that the file size is under 2MB.