Template:Main Page Hero

Description

Configures the optional background photos in the Main Page hero section for both desktop widescreen viewports and mobile portrait devices.

If omitted or set without an image, the hero section cleanly defaults to the AYSO navy-blue gradient and dot matrix pattern without any photo.

Usage

Setting Desktop and Mobile Photos

{{Main Page Hero
|image = hero-soccer-players.jpg
|mobile-image = hero-soccer-players-portrait.jpg
}}

Setting Only Desktop Photo (Mobile Shows Clean Brand Gradient)

{{Main Page Hero
|image = hero-soccer-players.jpg
}}

On mobile viewports, if mobile-image is not specified, the hero automatically displays the clean AYSO brand gradient and dot matrix pattern so that wide landscape photos are never awkwardly cropped.

Explicitly Disabling All Photos (Pure Brand Gradient)

{{Main Page Hero|image=none}}

or omitting the template call completely from the page.

Parameters

image: (Optional) desktop photo filename (e.g. hero-soccer-players.jpg). Rendered on viewports ≥ 768px wide. If omitted or none, no desktop image is displayed.
position: (Optional) CSS object-position for the desktop photo (e.g. center right, top right, center center). Defaults to center right.
mobile-image: (Optional) portrait photo filename for smartphones and mobile devices (< 768px wide). If omitted, mobile cleanly falls back to the brand gradient.
mobile-position: (Optional) CSS object-position for the mobile portrait photo (e.g. center center, top center). Defaults to center center.

Image Guidelines & Recommendations

Desktop Image (`image`)

Aspect Ratio: Landscape format — recommended 16:9 (widescreen, 1920 × 1080 px) or 3:2 (standard 35mm DSLR landscape, 1920 × 1280 px).
Composition: Primary action/subjects should be in the right half or right third of the frame so they are not obscured by the search box and title on the left.
File Weight: ~250–500 KB (JPEG or WebP).

Mobile Portrait Image (`mobile-image`)

Aspect Ratio: Portrait format — recommended 3:4 (e.g. 1080 × 1440 px, standard smartphone camera portrait) or 9:16 (1080 × 1920 px, vertical full screen).
Composition: Subjects framed with ample vertical headroom so the text overlay and search box comfortably fit over the bottom portion of the frame without cutting off faces.
File Weight: ~150–300 KB (JPEG or WebP) for rapid cellular download.