Managing Hero Slides
Hero slides control the full-screen background slideshow on the landing page. They are stored in src/content/hero-slides/.
Creating a Slide
Create a new file named after the slide (e.g., team-photo.mdx). The filename is just an identifier — display order comes from the order frontmatter field, not the filename.
Image slide:
---
order: 6
alt: "Mars Rover Engineering lecture at BEARS"
shownText: "Explore Mars"
media:
discriminant: image
value: /mars-rover-lecture/media.jpg
---Video slide:
---
order: 7
alt: "Decorative video background"
shownText: "Video Background Example"
media:
discriminant: video
value: /video-background-example/media.webm
---The body of hero slide files is not used.
Required Fields
| Field | Type | Description |
|---|---|---|
order | number | Display order — slides are shown in ascending order of this number |
alt | string | Alt text for accessibility; also used as the slide’s slug in the admin UI |
media.discriminant | enum | Either image or video — determines which upload widget the admin UI shows |
media.value | string | Path to the file, relative to src/assets/hero/landingpage/ (e.g. /my-slide/media.jpg) |
Optional Fields
| Field | Type | Description |
|---|---|---|
shownText | string | Overlay text displayed in the corner of the slide on the homepage hero. Doubles as the caption strip when this slide appears on /media — use it for any combination of caption and photographer credit. |
displayInMedia | boolean | When true (default), an image slide appears in the Hero Slides category on /media. Videos never surface there. |
Media Files
Uploads via the admin UI are placed at src/assets/hero/landingpage/<slug>/media.<ext> (one folder per slide, named after the slide’s alt text). The media.value field in the frontmatter is set automatically.
- Images:
.jpg,.jpeg,.png,.webp,.svg - Videos:
.mp4,.webm,.ogg
Uploading through the admin UI: larger files (images >2 MB, videos >10 MB) will freeze the tab during upload — just let it run and it will go through after a while. Smaller files are preferred; shrink images at squoosh.app and compress videos with HandBrake or ffmpeg when you can. Dropping files into the right subfolder via git is always the quickest route for large media.
Hero Logo
The landing hero displays a logo image instead of a text heading. The logo is loaded from src/assets/hero/landingpage/logo/ — place a single image file in this directory. The filename does not matter; the component picks the first image it finds. To replace the logo, simply swap the file. If the directory is empty, a plain-text “BEARS” heading is shown as a fallback.
Ordering
Slides are sorted in ascending order of the order field. Two slides with the same order break the tie by filename. In the admin UI, the Order column in the Hero Slides overview shows each slide’s position.