Text & Media
Das "Text & Media"-Element ist das am häufigsten verwendete Content Element und stellt ein vielseitiges Werkzeug bei der Gestaltung Ihres Webauftritts dar. Im Inhaltselement "Text & Media" können Sie neben Texten auch Bilder, Audiodateien oder Videos auf Ihrer Seite einbauen.
Bilder für die Webseite vorbereiten
Bilder müssen vor dem Hochladen auf die Webseite vorbereitet werden:
- Laden Sie Bilder nicht einfach von der Kamera in die Webseite oder ins Dateisystem der Webseite
- Bearbeiten Sie die Bilder im Vorfeld in einem Bildbearbeitungsprogramm (z.B. Photoshop):
- Dateinamen ändern
- Verkleinern Sie die Bildgröße auf die Maße wie sie dann in der Webseite dargestellt werden sollen
- Verwenden Sie nur Bilder im Dateiformat jpg/jpeg, gif, png, svg oder webp
- Erstellen Sie die Bilder mit gleicher Breite und Höhe, wenn sie zusammen in das gleiche Inhaltselement eingebaut werden – bevor Sie sie in die Filelist der Webseite hochladen.
- Beim Layout mit rechter Spalte ist die maximale Breite der Bilder 936 Pixel, beim Layout ohne rechte Spalte ist die maximale Breite 1176 Pixel.
Inhaltselement "Text&Media" anlegen
Um Mediaelemente (Bilder, Video, Audio) in ein Inhaltselement einzufügen, wählen Sie als Content Element Type "Text & Media" aus.
Übersicht Reiter "Media"
- Media-Elemente aus der Filelist (Add media file), von Ihrem Rechner (Select & upload files) oder über eine URL (Add media by URL) aus YouTube- oder Vimeo-Videos einbinden.
- Dateiformate, die mit Text & Media eingebunden werden können.
- Media-Elemente, die Sie bereits Ihrem CE hinzugefügt haben, werden hier aufgeführt. Die einzelnen Media-Elemente können bearbeitet, deaktiviert oder gelöscht werden.
- Größe der Media-Elemente festlegen. Die Einstellungen wirken sich auf das gesamte Inhaltselement aus, es ist nicht möglich unterschiedliche Größenangaben für die einzelnen Media-Elemente festzulegen. Sie können diese Felder auch leer lassen - dann wird die Breite/Höhe der Media-Elemente vom Template vorgegeben.
- Textfluss festlegen: Wie sind die Media-Elemente im Verhältnis zum Text positioniert. Diese Einstellung gilt für das gesamte Inhaltselement.
- "Enlarge on Click"-Funktion aktivieren.
Medien in ein Content Element einbinden
Klicken Sie im Reiter Media auf Add media file (Bild 2, Nr. 1). Die Filelist öffnet sich in einem Pop-Up-Fenster (Bild 3). Jetzt können Sie ein oder mehrere Mediaelemente dem Inhaltselement hinzufügen:
- Baumstruktur der Filelist. Speichern Sie Ihre Dateien in Ordnern und Unterordnern und erstellen Sie hier eine sinnvolle Struktur. Bei zu vielen Dateien in einem Ordner verlieren Sie leicht den Überblick.
- Liste der Dateien im ausgewählten Ordner. Sie können diese Dateien jetzt auswählen und Ihrem CE hinzufügen. Klicken Sie dazu auf die gewünschte Datei oder setzen Sie bei mehreren gewünschten Dateien einen Haken (Bild 3, Nr. 2A) und bestätigen Sie die Auswahl (Bild 3, Nr. 2B).
- Wenn eine Datei noch nicht in die Filelist hochgeladen wurde, klicken Sie auf “Durchsuchen…“ (Bild 3, Nr. 3) und wählen Sie im Dateiverzeichnis Ihres Rechners die gewünschten Dateien aus. Bestätigen Sie Ihre Auswahl mit "Upload files" (Bild 3, Nr. 3) und die Dateien werden in das angezeigte Verzeichnis der Filelist hochgeladen. Danach können Sie, wie in Punkt 2 beschrieben, fortfahren.
- Sie können einen Link zu einem Video (Youtube oder Vimeo) der Filelist hinzufügen. Tragen Sie dazu die URL Ihres Videos in das Feld ein und klicken Sie auf "Add media". Sie können mit diesem Link, wie in Punkt 2 beschrieben, arbeiten.
Für das Arbeiten mit Videoelementen gibt es eine eigene Anleitung.
Reihenfolge der Elemente ändern
Die Reihenfolge der Mediaelemente kann per Drag & Drop geändert werden:
- Klicken und halten Sie den "Festhalter" (Bild 4) und ziehen das Bild an die gewünschte Position.
Metadaten (Image Metadata)
Die Felder für die Metadaten sehen Sie, sobald Sie auf das Bild klicken (Bild 5, Nr. 1).
Haben Sie bereits Metadaten für die Filelist in der Datei angelegt, werden diese automatisch übernommen. Sie können diese für das jeweilige Inhaltselement auch ändern oder überschreiben, indem Sie auf die entsprechende Checkbox "Set element specific value (No default)" klicken. Die Felder werden damit aktiviert und können mit neuen Inhalten befüllt werden.
Alternativtext
Das Feld “Alternative Text” (Bild 5, Nr. 2) ist eine Pflichtangabe im Sinne der Barrierefreiheit. Die Nutzer von Screenreadern können kein Bild betrachten. Die einzige Möglichkeit, etwas über den Inhalt des Bildes zu erfahren, ist der Alternativtext. Dieser wird vom Screenreader vorgelesen. Oft lässt sich die Bedeutung eines Bildes in wenigen Worten beschreiben.
Weitere Informationen zur Formulierung finden Sie im Abschnitt “Alternativtexte für Bilder und Grafiken schreiben”.
Bildunterschrift
Im Feld Description (Caption) (Bild 5, Nr. 3) können Sie eine kurze aussagekräftige Bildunterschrift eintragen. Dieser Text ist, im Gegensatz zum Alternativtext, sichtbar und wird unterhalb des Bildes angezeigt. Die Bildunterschrift sollte sich vom Alternativtext unterscheiden. Hier können Sie Angaben wie z.B. “Name der abgebildeten Person” oder des Ortes oder auch zum Urheber (Copyright) machen.
Link
Sie haben auch die Möglichkeit, ein Medialement (Bilder oder PDFs) zu verlinken. Dazu fügen Sie die URL in das Feld Link ein (Bild 5, Nr. 4). Wird ein Bild verlinkt, ergänzen Sie den Alternativtext mit dem Ziel des Links. Weitere Informationen im Abschnitt “Das Bild ist ein Link“.
Beachten Sie, dass Sie nicht gleichzeitig die "Enlarge on Click" Funktion aktivieren und einen Link setzen können.
Titel
Lassen Sie das Feld Title (Bild 5, Nr. 5) frei.
Die Unterstützung des Title-Attributs im Browser ist so uneinheitlich, dass auch der HTML-Standard von der Verwendung abrät: HTML Living Standard, 3.2.6.1 The title attribute.
Don't Rely on the Title Attribute for Accessibility (English).
Hinzu kommt, dass das Title-Attribut für die Suchmaschinenoptimierung (SEO) nicht relevant ist.
Weitere Optionen
- Geben Sie entweder die Breite oder die Höhe ein (Bild 6, Nr. 1). Bitte nur einen der beiden Werte eintragen!
- Wählen Sie den Textfluss: Wie ist die Position der Media-Elemente in Bezug auf den Text (Bild 6, Nr. 2)?
- Number of Columns (Bild 6, Nr. 3):
- Sollen mehrere Bilder untereinander dargestellt werden, wählen Sie Number of Columns=1.
- Möchten Sie mehrere Bilder nebeneinander platzieren, wählen Sie die gewünschte Anzahl der Spalten (max. 9).
- Enlarge on Click (Bild 6, Nr. 4): Diese Funktion ist nur für Bilder verfügbar. Weitere Informationen dazu finden Sie in der Beschreibung zur Bildergalerie-Funktion.
Hinweis zur empfohlenen und maximalen Bildgröße
Die maximale Breite von Bildern in der Hauptspalte ist 1176 Pixel beim zweispaltigen Seitenlayout (ohne rechte Spalte), und 936 Pixel beim dreispaltigen Seitenlayout. Die maximale Bildbreite für die Enlarge-on-click-Funktion beträgt 1280 Pixel.
Für Anordnungen von Bildern neben dem Text oder in mehreren Spalten werden die Maße entsprechend angepasst. Das gilt natürlich auch dann, wenn Sie bei Media die Breite oder Höhe direkt bestimmen.
Ist das Bild in der hochgeladenen Datei größer als es in der Ausgabe verwendet wird, wird von TYPO3 eine skalierte Kopie des Bildes angelegt und verwendet. Die Bildqualität kann durch dieses Skalieren beeinträchtigt werden. Je größer der Skalierungsschritt ist, umso deutlicher verschlechtert sich das Bild. Sie sollten also Bilder vor dem Hochladen mit einem geeigneten Bildbearbeitungsprogramm auf Ihrem Computer so skalieren, dass TYPO3 Ihre Dateien direkt verwenden kann. Das gilt insbesondere für Fotos, die Sie von einer Digitalkamera übernehmen, und dann, wenn das Originalformat erhalten bleiben soll (GIF oder PNG werden sonst als JPEG ausgegeben).