Skip to content

🖼️ Gallery Panel Configuration

The Gallery Panel appears on the loading screen and allows you to showcase images such as cars, team highlights, banners, or community events.

You can customize the images shown by editing the gallery array in your configuration file.

JSON Structure

"gallery": [
    { "path": "./assets/png/headshot.png" },
    { "path": "./assets/png/bluebmw.png" },
    { "path": "./assets/png/fmbanner.png" },
    { "path": "./assets/png/2gtrs.png" },
    { "path": "./assets/png/vibe.png" },
    { "path": "./assets/png/supra2.png" }
]

Field Breakdown

Field Description
path The file path to your image asset (relative to your loading screen assets/)

Recommended Image Format

Use .png or .jpg images in landscape orientation for best visual balance.

Aspect Ratio Tip

For a clean layout, try to keep all gallery images at a consistent resolution (e.g. 1280x720 or 1920x1080).

Viewing Images (Lightbox)

Clicking any thumbnail opens the image in a full-size lightbox. From there you can move through the gallery:

  • On-screen arrows — left/right arrows on the sides of the image jump to the previous/next picture.
  • Keyboard — the ← and → arrow keys navigate, and Esc closes the lightbox.

Navigation wraps around: going back from the first image shows the last, and forward from the last returns to the first.

Single image

The navigation arrows only appear when the gallery has more than one image. No extra configuration is needed — navigation works over your existing gallery array.

Lightbox Preview

Gallery lightbox with side arrows, position dots, and a keyboard hint

Gallery Panel Preview

Automatic Gallery Tab Hiding

The gallery tab is automatically hidden if the gallery array is empty ([ ]) or omitted entirely from the config. To disable the gallery feature, simply remove the gallery entry or ensure the array contains no images.