1. What is this page for?
The Banners page allows you to choose the shape of the hero banner carousel on the lobby home page, upload slide images, and arrange the order they slide in. It is used by marketing teams and administrators to showcase promotions, tournaments, and new games at the top of the website where players see them first.
2. Before you start
- Required permissions: You must be granted the 'Banners' permission by an administrator to access this page.
- Prerequisites:
- Banner image files designed at the recommended size of 1920 × 420 px (keep important text and logos within the center 1096 px).
- Supported file formats: PNG, JPG, WEBP, or GIF.
- File size: Not exceeding 5 MB per image.
- Number of images: Up to 10 pictures maximum.
3. Screen overview
When you open this page, you will see the following key areas:
- Audit bar (Page Audit): Displays the data version, updater name, updater type, and last update timestamp.
- Live preview card (On the site): Simulates how banners render on the live site. Includes device toggle buttons for Computer and Phone, a switch to Show the part never cut, and numbered slide buttons.
- Banner shape selection (Shape): 3 banner shapes: Rounded, Square, and Sliding with sides, complete with an In use badge on the active style.
- Size guide (Picture size): Explains recommended universal image dimensions (1920 × 420 px) and safe-area guidelines.
- Banner upload section (Banner pictures): An upload dropzone for dragging and selecting files, and a grid of uploaded image cards with drag handles for reordering.
- Action bar (Form Action Bar): Bottom bar containing Cancel and Save buttons.
4. Search and filters
This page does not use a data search filter. Instead, it provides preview inspection tools:
| Tool | Type | How to use | Result |
|---|
| Device toggle | Tab buttons | Click between Computer and Phone | Resizes the preview frame to match desktop and mobile display dimensions |
| Show the part never cut | Toggle switch | Toggle on or off | Displays a white dashed box over the center 1096 px safe area that remains visible on all screen sizes |
| Slide number buttons | Number buttons 1, 2, 3... | Click any slide number | Moves the preview carousel to that specific slide |
5. Data table
Uploaded banner images are displayed as reorderable cards:
Banner image card components
| Item | What you see | Meaning | Badge / Symbol |
|---|
| Slide order badge | Badge #1, #2, #3... at top right | Order in which the picture slides on the lobby page | Dark transparent badge, turns blue when dragged |
| Image thumbnail | Uploaded banner picture | Visual thumbnail of the banner (click image to open full-size Lightbox) | 6-dot grip icon appears on hover |
| Image label | "Picture 1", "Picture 2"... | Sequence number in the upload list | Dark text |
| Fit note | Dimensions and compatibility note below image | System analyzes image dimensions against banner shapes | Green text = Fits all shapes, Orange text = Fits slide only or different aspect ratio / Low resolution |
| Delete button | Red X button at bottom right | Removes the image from the banner list | Red trash/cross icon |
Buttons on this page
| Button | Location / Style | What happens when clicked | Notes / Conditions |
|---|
| Shape cards | 3 shape selector cards | Selects the active banner carousel style | Options: Rounded, Square, Sliding with sides |
| Upload dropzone | Dashed blue border box | Opens file browser or accepts dropped image files | Supports PNG, JPG, WEBP, GIF up to 5 MB per file |
| Remove picture | Red X button on image card | Removes the image from the list immediately | Must click Save at the bottom to apply changes |
| Image zoom (Lightbox) | Click on image thumbnail | Opens full-size image modal | Close by clicking the X or background area |
| Cancel | Grey button at bottom right | Discards all shape selections, image uploads, and reordering | Enabled only when unsaved changes exist |
| Save | Primary button at bottom right | Uploads new files and publishes banner settings to the live site | Enabled only when unsaved changes exist |
6. Step by step
1. Choosing a banner shape
- Go to Lobby pages > Banners in the left sidebar.
- Scroll to the Shape section.
- Select one of the 3 styles:
- Rounded: Full content width with rounded corners (desktop aspect ratio ≈ 4.4 : 1).
- Square: Full content width with square corners (desktop aspect ratio ≈ 4.4 : 1).
- Sliding with sides: Large centered main slide with adjacent slides peeking out on both sides (aspect ratio ≈ 2.5 : 1).
- Check the On the site preview box at the top to see the new shape immediately.
2. Uploading banner pictures
- Scroll down to the Banner pictures section.
- Click the upload dropzone or drag files from your computer into the box.
- You can select multiple images at once (the system automatically optimizes files).
- Check the fit note below each uploaded picture:
- Green text "1920 × 420 px · Fits every shape" indicates ideal dimensions.
- Orange text indicates the picture may have edges cropped on certain shapes.
- You can upload up to 10 pictures total.
3. Reordering slides
- Find the image card you want to move.
- Click and hold the card, then drag it left or right to the desired position.
- The
#1, #2, #3 badges update automatically.
- Picture
#1 is the first slide players see when landing on the website.
4. Deleting a banner picture
- Locate the image card you want to delete.
- Click the red X button at the bottom right of the card.
- The image is removed from the list immediately.
5. Reviewing and saving
- Scroll up to the On the site preview card.
- Toggle between Computer and Phone to verify appearance on both screen sizes.
- Turn on Show the part never cut to confirm important text, logos, and promotional details sit safely inside the dashed frame.
- Click Save at the bottom right. The system displays a green notification: "Banner saved".
| Setting / Field | Required? | What to enter / select | Example | Constraints |
|---|
| Banner shape | Required | Select 1 of 3 styles: Rounded, Square, or Sliding with sides | Rounded | 1 style active for the entire site |
| Banner pictures | Optional | Banner slide image files | Promotional image file | Max 10 pictures, max 5 MB per file, PNG, JPG, WEBP, GIF |
| Slide order | Optional | Order of banner slides | Slide 1 appears before Slide 2 | Drag to reorder freely |
8. Popups and dialogs
1. Full-size Image Zoom Modal (Image Lightbox)
- When it opens: When you click on any uploaded banner thumbnail.
- What you see: A full-size view of the image against a dark backdrop with a close button.
- What to do: Inspect image sharpness, text alignment, and details.
- Result: Click the close button or outside the image to return to the settings page.
2. Version Conflict Warning
- When it opens: When you click Save but another administrator saved changes to banners first (error code 1005).
- What you see: A message stating "Another administrator saved banners earlier. The latest version is now shown. Please make your edits again."
- What to do: Review the latest version loaded automatically by the system, then apply your changes again.
- Result: Settings are updated against the latest revision.
9. Statuses and badges
| Status / Badge | Color | Meaning | Next action |
|---|
| In use | Green | This banner shape is currently active on the live website | Currently active; no action required |
| Fits every shape | Green | Image matches universal recommended dimensions (1920 × 420 px) | No adjustments needed |
| Fits slide only | Orange | Image fits the sliding shape; rounded and square styles may crop top and bottom | Check preview in rounded/square mode |
| Different aspect ratio | Orange | Image does not match recommended ratio; edges are cropped to fill the frame | Check if important text is cut off |
| Low resolution | Orange | Image width is less than 1440 px; may appear soft on large computer screens | Upload a higher-resolution image if possible |
| No pictures | Grey | No banner images uploaded; players see 3 default grey placeholders | Upload at least 1 banner image |
10. Frequently asked questions & troubleshooting
- What do players see if no banner images are uploaded?
- If zero images are uploaded, the website and preview card display 3 default grey slides showing recommended dimensions. Upload at least 1 image and click Save.
- Why is text or logos cut off on the sides?
- Banners always fill the entire container without black borders. In Sliding with sides mode, outer edges are cropped. Place all important text and logos within the central 1096 px area and turn on Show the part never cut to verify before saving.
- Image upload fails:
- Verify that the image file does not exceed 5 MB and is in PNG, JPG, WEBP, or GIF format.
- Cannot add more than 10 pictures:
- The system enforces a maximum limit of 10 banner images to protect page load performance. Delete unused older banners before adding new ones.
- The Save button is greyed out:
- The Save button is disabled when there are no unsaved changes. It becomes active as soon as you change the shape, upload, delete, or reorder images.