Bilder und Filme
Wie Bilder und Filme im Seitenfluss stehen: fünf Breiten, eine Bildunterschrift, eine Slideshow und die Kennzeichnung von KI-Inhalten. Markup in components/figure.html, Stile in components/media.css.
Breiten
Die Breite sagt, welches Gewicht ein Bild hat. Es gibt fünf Stufen, keine freien Maße. Alle Figuren stehen als direkte Kinder in einem .media-flow, der über die volle Seitenbreite läuft. Jede Figur misst ihre Breite darin selbst. Unter 80rem fallen Inhalt, Überstand und Layout zusammen, unter 48rem steht auch der Überstand wieder mit Rand.
| Stufe | Klasse | Maß | bei 1440px | Wofür |
|---|---|---|---|---|
| Absatz | figure--paragraph | --container-reading | 832px | Bild gehört zum Text: Detail, Zeichnung, Beleg |
| Inhalt | figure--content | Container | 1184px (ab 1536px: 1440px) | Bild trägt einen Abschnitt. Standard |
| Überstand | figure--overhang-end / -start | Containerkante bis Fensterrand | 1312px | Bild bricht aus dem Raster aus, eine Kante bleibt verankert |
| Layout | figure--layout | --container-wide | 1344px | Bildstrecke, Anlage im Ganzen |
| Fenster | figure--viewport | 100 % des Flusses | 1440px | Zäsur zwischen zwei Kapiteln, randlos |
Absatz. Das Bild steht in der Lesespalte, genau so breit wie der Text darüber und darunter. Es unterbricht den Satz nicht, es setzt ihn fort.
Inhalt. Containerbreite, bündig mit Sektionsköpfen und Kacheln. Die Stufe für alles, was keinen Grund für eine andere hat.
Überstand. Eine Kante hält die Containerlinie, die andere läuft bis an den Fensterrand. Das Bild ragt aus dem Raster, bleibt aber daran verankert. Die Seite wählt die Redaktion.
Layout. Die breite Stufe des Rasters, symmetrisch. Für Bilder, die eine ganze Anlage zeigen und Platz zum Lesen brauchen.
Fenster. Von Kante zu Kante, ohne Rand. Sparsam einsetzen, höchstens einmal je Seite. Die Unterschrift bleibt an der Inhaltskante.
Bildband
Ein redaktioneller Sonderfall, heute auf der Startseite zwischen zwei Sektionen (sections/photo-band.html, Daten home.json → bandWork). Kein Bild im Fluss, sondern eine eigene Sektion: randlos wie die Stufe „Fenster“, aber mit fester, niedriger Höhe (14 bis 28rem, das Foto wird beschnitten), und die Unterschrift steht im Bild auf einem Verlauf, bündig mit dem Container. Sie benennt nur, was zu sehen ist, sie behauptet nichts. Eine Atempause, kein Inhalt: höchstens einmal zwischen zwei Sektionen.
Craft: eigener Matrix-Block „Bildband“ mit Asset und optionaler Unterschrift, nicht der Block „Bild“ mit der Breite „Fenster“. Das Motiv muss einen breiten Ausschnitt vertragen; der Fokuspunkt des Assets entscheidet, was stehen bleibt.
Bildunterschrift
Eine figcaption unter jedem Bild und Film: Beschreibung, dahinter optional die Quelle, getrennt durch einen Mittelpunkt. Meta-Größe, gedämpfte Textfarbe, höchstens so breit wie die Lesespalte. Die Quelle bricht nie in sich um. Ohne Beschreibung und Quelle entfällt die Unterschrift ganz.
Die Beschreibung darf Links enthalten, die Quelle nicht. Ein Link ist ein Textlink im Satz, ohne Pfeil: volle Textfarbe gegen den gedämpften Rest, Unterstreichung wie überall. Im Bildband weiß mit silberner Linie. Links auf fremde Seiten öffnen ein neues Tab und tragen den Außenpfeil des Hauses (siehe craft-handover.md).
Slideshow
Der Slider des Systems (slider--single slider--light) mit Maßstrich, Zähler und Pfeilen. Ein Bild je Blick, festes Format 3:2, damit die Höhe beim Wechsel nicht springt. Jede Folie nimmt ihre Unterschrift mit. Kein automatischer Wechsel. Ohne JavaScript stehen die Bilder untereinander. Breiten: Inhalt oder Überstand.
-
Montage einer Anlage im Technikum in Mühltal.Foto: 3defacto -
Schweißbau in der eigenen Fertigung.Foto: 3defacto -
Schaltschrankbau in der Elektroabteilung.Foto: 3defacto -
Konstruktion: Baugruppe im Konstruktionsbüro.Foto: 3defacto -
Sondermaschine in der Endabnahme.Foto: 3defacto
Im Überstand. Dieselbe Strecke, rechts bis an den Fensterrand.
-
3D-CAD-Modell einer Baugruppe in SolidWorks.Foto: 3defacto -
Technische Zeichnung auf dem Arbeitstisch.Foto: 3defacto -
Endmontage einer Anlagenkomponente.Foto: 3defacto
KI-Kennzeichnung
Ein Zeichen für alle KI-Inhalte: Lucide sparkles und „KI“ (englische Seite „AI“), eckiges Schild in Tiefanthrazit mit weißer Schrift. Neutral, nie in Bereichsfarbe oder Rot. Screenreader lesen den ganzen Satz „Mit KI erzeugt“. Geschaltet wird über das Feld ai: true, in Craft ein Lightswitch am Asset.
Bild: Das Schild sitzt im Bild, unten rechts, an jedem Bild (Eintrag 281). So bleibt es am Bild, auch in der Slideshow und ohne Unterschrift. Film: Die Kennzeichnung steht unter dem Film als erste Zeile der Unterschrift, weil unten links der Abspielknopf und die Bedienleiste liegen.
Mit KI erzeugt -
Folie ohne Kennzeichnung: echtes Foto.Foto: 3defacto 
Mit KI erzeugt Folie mit Kennzeichnung: KI-Platzhalter aus dem Karriere-Flyout.Bild: Higgsfield - Mit KI erzeugt
Folie mit Kennzeichnung: KI-Platzhalter der WHG-Meldung.Bild: Higgsfield
Bildband. Die Unterschrift steht unten links, das Schild in derselben Zeile am rechten Ende – unten rechts wie an jedem Bild.
Filme. Beide Beispiele sind echte Filme von 3defacto und nicht mit KI erzeugt. Die Kennzeichnung steht hier nur zur Vorführung.
Englische Seite. Dasselbe Schild mit „AI“, vorgelesen „Generated with AI“.
Generated with AI