Bildformatierungen

Bilder im Forum verwenden (inkl. Größen- und Layout-Tricks)

Dieses Forum nutzt FoF Upload für Bilder. Für dich als Nutzer bedeutet das: Du fügst Bilder ganz normal über das Bild-Icon im Editor ein – und das Forum kümmert sich um Upload und Anzeige.

Zusätzlich gibt es hier eine praktische Sonderfunktion: Du kannst Größe und Ausrichtung eines Bildes über Marker im Alt-Text steuern (z. B. Bild rechts, Text fließt links vorbei).

1) Bild einfügen (Standard)

Option A: Per Button

Öffne den Editor (Neuer Beitrag / Antwort).
Klicke unten in der Leiste auf das Bild-Symbol (kleines Bild/Foto-Icon).
Wähle eine Datei aus (oder ziehe sie per Drag & Drop in den Editor).

Option B: Drag & Drop

Ziehe ein Bild direkt in den Editorbereich.

Nach dem Einfügen siehst du das Bild in der Vorschau (oder nach dem Speichern im Beitrag).

2) Bilder formatieren über Alt-Text-Marker

Was kann ich steuern?

Ausrichtung + Textfluss

@r = Bild rechts, Text fließt links daran vorbei
@l = Bild links, Text fließt rechts daran vorbei

Größe

@xs = sehr klein
@sm = klein (empfohlen für Fließtext)
@md = mittel

Du kannst die Marker kombinieren, z. B. @r @sm.

So geht’s Schritt für Schritt

Bild normal einfügen (Bild-Icon oder Drag & Drop).
Klicke unten auf </> (Quelltext).
Suche die Zeile, die zu deinem Bild gehört. Sie sieht ungefähr so aus:
```
[upl-image-preview ... alt={...}]
```
Ergänze im alt={...} deine Marker + eine Beschreibung, z. B.:
```
alt={@r @sm Hugh Vaughan}
```
Klicke wieder auf das Auge (Vorschau) und prüfe das Layout.

Beispiele zum Kopieren

Bild rechts, klein (Standard für Artikel)

alt={@r @sm Beschreibung}

Bild links, sehr klein

alt={@l @xs Zeitungsausschnitt}

Bild ohne Layout-Änderung (keine Marker)

alt={Beschreibung}

3) Damit der Text wirklich um das Bild fließt

Damit Text „um das Bild herum“ laufen kann, muss direkt nach dem Bild eine Überschrift oder normaler Fließtext kommen.

✅ Gute Struktur (Textfluss klappt):

[Bild hier]

## Überschrift

Dann kommt normaler Text, der am Bild vorbeifließt …

⚠️ Häufiger Stolperstein: Trenner direkt nach dem Bild
Ein Markdown-Trenner --- wird als Linie dargestellt und beendet in diesem Forum den Float-Effekt. Setze --- daher nicht direkt nach dem Bild, sondern erst nach dem Abschnitt.

5) Mobile Hinweis

Auf Smartphones (bzw. bei schmalem Browserfenster) werden solche Floats absichtlich deaktiviert: Bilder laufen dann über die volle Breite, damit es besser lesbar bleibt. Das ist normal.

6) Tips

Nutze @r @sm für „Zeitungs-/Notiz“-Stil mit Textfluss.
Setze Bilder unter die Überschrift, wenn die Überschrift sauber vollbreit bleiben soll.
Schreib im alt={...} immer eine kurze Beschreibung (hilft Lesbarkeit und Barrierefreiheit).
Mit einem hr ( --- ) kannst du dafür sorgen das der Text nicht mehr um das Bild läuft