Nick SzaunigandClaude Opus 5.5
d45700a9ef
Ursachen der langen Ladezeiten: Reel-Video 1,6 GB in 4K mit Index am Dateiende, Headerbild 15 MB, Vorschaubild 1,3 MB im Original. Neues Skript erzeugt Web-Fassungen (<name>.web.mp4, 1080p, faststart; verkleinerte Bilder), die Seite bevorzugt sie automatisch. Mediendateien mit ?v= werden ein Jahr (immutable) gecacht, optimierte Bilder 30 Tage. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
4.6 KiB
Medien: Dateinamen
Logo, Headerbild, Porträts und Reels liegen im Medienverzeichnis. Im Cluster ist das das Volume artista-modelcamp-media, gemountet unter /app/media. Lokal ist es ./media (MEDIA_DIR).
Lege eine Datei unter dem passenden Namen dort ab, dann erscheint sie beim nächsten Seitenaufruf. Neustart und Deployment sind nicht nötig. Fehlt eine Datei, bleibt der Platzhalter oder das Standardbild sichtbar.
Dateinamen bitte so schreiben: ohne Leerzeichen und Umlaute. Gross- und Kleinschreibung ist egal (Reel-1.JPG wird auch erkannt). Bei mehreren Endungen nimmt die Seite die erste, die sie findet.
Logo
| Datei | Wofür | Hinweis |
|---|---|---|
logo.svg (oder .png, .webp) |
Dunkles Logo für helle Flächen: Kopfzeile nach dem Scrollen, Fußbereich | SVG bevorzugt, PNG mit transparentem Hintergrund |
logo-hell.svg (oder .png, .webp) |
Helles bzw. weißes Logo über dem Headerbild | Fehlt es, wird logo.* verwendet |
Das Logo wird über dem Headerbild bis 176 px hoch angezeigt, nach dem Scrollen 80 px. Die Seite misst selbst, ob eine Datei hell oder dunkel ist, und setzt sie auf den passenden Untergrund. Liegt nur eine helle Fassung vor, wird sie auf hellen Flächen automatisch abgedunkelt (und umgekehrt). Große PNGs werden verkleinert ausgeliefert.
Headerbild
| Datei | Wofür | Hinweis |
|---|---|---|
header.jpg (oder .webp, .png) |
Bild über die ganze Breite oben | Querformat, mindestens 2400 px breit. Ohne Datei erscheint die Luftaufnahme der Villa |
header.mp4 (optional) |
Video statt Standbild, läuft stumm in Schleife | Kurz halten (unter 15 s, unter 10 MB). header.jpg dient als Vorschaubild |
Video unter dem Headerbild
| Datei | Wofür | Hinweis |
|---|---|---|
intro.mp4 |
Video direkt unter dem Headerbild, startet erst nach Klick | Quer- oder Hochformat. Ohne Datei entfällt der Abschnitt |
intro.jpg (oder .webp, .png) |
Vorschaubild des Videos | Empfohlen: Mit Vorschaubild lädt vom Video vorab nichts |
intro.web.mp4 (optional) |
Web-Fassung, wird bevorzugt angezeigt | Erzeugen mit pnpm media:optimize, siehe unten |
Team (Ordner team/)
Hochformat 3:4 oder 4:5, mindestens 1200 px breit, Gesicht im oberen Drittel. Das Bild wird oben rund (als Bogen) beschnitten.
| Person | Datei |
|---|---|
| Eric Heitz | team/eric-heitz.jpg |
| Michele Ietro | team/michele-ietro.jpg |
| Lola Stoll | team/lola-stoll.jpg |
| Eileen Kaupp | team/eileen-kaupp.jpg |
| Gabriela Pronkin | team/gabriela-pronkin.jpg |
| Saskia Sirowatka | team/saskia-sirowatka.jpg |
| André Hartshauser | team/andre-hartshauser.jpg |
| Ante Rejo | team/ante-rejo.jpg |
Reels (Ordner reels/)
Hochformat 9:16. Das Video startet erst nach Klick und nie von selbst mit Ton.
| Slot | Video | Vorschaubild |
|---|---|---|
| Reel 1 | reels/reel-1.mp4 |
reels/reel-1.jpg |
| Reel 2 | reels/reel-2.mp4 |
reels/reel-2.jpg |
| Reel 3 | reels/reel-3.mp4 |
reels/reel-3.jpg |
Ein Reel erscheint öffentlich erst, wenn das Video vorhanden ist. Namen und Begleittext stehen in src/content/site.ts unter reels.slots. Sie dürfen nur mit Freigabe der gezeigten Person eingetragen werden.
Vor dem Hochladen: Videos und große Bilder aufbereiten
Videos direkt aus Kamera oder Schnittprogramm sind oft riesig (ein Reel hatte 1,6 GB in 4K) und haben den Index am Dateiende. Der Browser muss dann sehr viel laden, bevor überhaupt etwas läuft. Deshalb einmal aufbereiten:
pnpm media:optimize C:\Pfad\zu\meinen-medien
Das Skript legt daneben einen Ordner meinen-medien-web mit gleicher Struktur an:
- aus jedem Video eine
<name>.web.mp4(höchstens 1920 px, H.264, sofort abspielbar;headerohne Ton) und, falls kein Vorschaubild vorhanden ist, eine<name>.jpg - große Bilder verkleinert (Logo 1600 px, sonst 2560 px längste Seite), kleinere unverändert
Den Inhalt dieses Ordners ins Medienverzeichnis kopieren. Liegt <name>.web.mp4 neben dem Original, zeigt die Seite automatisch die Web-Fassung; das Original kann dann auch entfernt werden. Bereits aufbereitete Dateien überspringt das Skript beim nächsten Lauf.
Ablage im Cluster
Die Dateien kommen auf die SMB-Freigabe hinter dem Volume (siehe k8s/03-storage.yaml), zum Beispiel:
modelcamp-media/
logo.svg
logo-hell.svg
header.jpg
team/eric-heitz.jpg
reels/reel-1.mp4
reels/reel-1.jpg
Der Container liest das Verzeichnis nur. Ein ersetztes Bild ist sofort sichtbar, weil die Seite das Änderungsdatum an die Bildadresse hängt.
Fest eingebaute Bilder
Die Unterkunftsbilder der Villa liegen in public/images/unterkunft/ und sind Teil des Container-Images. Austausch dort nur mit neuem Build.