Direkt zum Hauptinhalt

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

  1. Öffne den Editor (Neuer Beitrag / Antwort).

  2. Klicke unten in der Leiste auf das Bild-Symbol (kleines Bild/Foto-Icon).

  3. 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) Vorschau vs. „Quelltext“ (wichtig für Formatierung)

Im Editor gibt es unten zwei besonders relevante Buttons:

  • Auge (👁) = Vorschau ein/aus (so siehst du, wie es am Ende aussieht)

  • </> = Quelltext/Markup-Ansicht (hier kann man Details wie Alt-Text bearbeiten)

Wenn du die Layout-Marker verwenden willst (rechts/links/Größe), musst du kurz in den Quelltext wechseln, weil es dafür kein eigenes Klick-Menü gibt.

3) 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

  1. Bild normal einfügen (Bild-Icon oder Drag & Drop).

  2. Klicke unten auf </> (Quelltext).

  3. Suche die Zeile, die zu deinem Bild gehört. Sie sieht ungefähr so aus:

    [upl-image-preview ... alt={...}]

  4. Ergänze im alt={...} deine Marker + eine Beschreibung, z. B.:

    alt={@r @sm Hugh Vaughan}

  5. 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}

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

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

✅ Gute Struktur (Textfluss klappt):

## Überschrift

[Bild hier]

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) Empfehlungen für gute Beiträge

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
nach oben