Bilder
Bilder werden in TYPO3 über das Inhaltselement „Text & Media" eingebunden. Bevor Sie Bilder hochladen, bereiten Sie diese in einem Bildbearbeitungsprogramm vor.
Bildvorbereitung
Wichtig: Laden Sie niemals unkomprimierte Kameradateien hoch. Bereiten Sie Bilder immer vor!
| Anforderung | Details |
|---|---|
| Formate | JPG/JPEG, GIF, PNG, SVG, WebP |
| Maximale Breite | 936 px (mit rechter Spalte) / 1176 px (ohne rechte Spalte) |
| Gleiche Maße | Bei mehreren Bildern in einem Element: gleiche Breite und Höhe |
| Dateiname | Sprechend benennen, keine Sonderzeichen |
Hinweis
Bearbeiten Sie Bilder immer in einem Bildbearbeitungsprogramm und passen Sie sie auf die Zielgröße an – überlassen Sie das nicht TYPO3.
Bild hochladen
Bevor Sie ein Bild in einem Inhaltselement verwenden können, muss es in die Dateiliste (Filelist) hochgeladen werden:
- Öffnen Sie das Modul Dateiliste in der Modulleiste
- Navigieren Sie zum gewünschten Ordner
- Klicken Sie auf „Datei hochladen"
- Wählen Sie Ihre Bilddatei aus
Details finden Sie in der Anleitung zur Filelist.
Bild in ein Inhaltselement einbinden
- Öffnen Sie ein „Text & Media"-Inhaltselement (neu anlegen oder bearbeiten)
- Wechseln Sie zum Tab „Medien"
- Klicken Sie auf „Mediendatei hinzufügen"
- Der Datei-Browser öffnet sich – navigieren Sie zu Ihrem Bild und wählen Sie es aus
- Das Bild erscheint in der Medienliste
Bildeinstellungen
| Einstellung | Beschreibung |
|---|---|
| Breite / Höhe | Nur einen Wert angeben – das Bild skaliert proportional |
| Textumfluss | Text fließt links oder rechts um das Bild |
| Spalten | Mehrere Bilder in bis zu 9 Spalten nebeneinander |
| Reihenfolge | Per Drag-and-Drop verschieben |
Hinweis
Geben Sie immer nur entweder Breite oder Höhe an – nicht beides. Sonst kann das Bild verzerrt dargestellt werden.
Bildmetadaten bearbeiten
Klicken Sie auf ein eingebundenes Bild in der Medienliste, um elementspezifische Einstellungen vorzunehmen:
- Titel: Überschreibt den Standard-Dateititel
- Beschriftung (Caption): Erscheint unter dem Bild im Frontend
- Alternativtext: Für Screenreader und SEO → Details finden Sie auf der Anleitungsseite zu Alternativtexten
Mehrere Bilder
- Vertikal (untereinander): Standard, kein Spalten-Wert nötig
- Horizontal (nebeneinander): Stellen Sie die Anzahl der Spalten ein
Hinweis
Erstellen Sie alle Bilder in gleicher Breite und Höhe, damit die Galerie gleichmäßig wirkt.
Beispiel SVG
