Mediaelemente einbinden

Mit TYPO3 8 LTS wurden die ehemals getrennten Inhaltstypen "Text", "Text & Images" und "Images" zum neuen Inhaltstyp "Text & Media" zusammengefasst. Damit verbunden ist eine erhebliche Funktionserweiterung, die es ermöglicht neben Bildern auch andere Mediaelemente in einem Contentelement anzulegen und in den Text einzubinden.

Mediaelemente anlegen

Um ein oder mehrere Mediaelemente in ein Inhaltselement einzufügen, wählen Sie als Inhaltstypen (Type) „Text & Media“ aus.

Sie können übrigens jederzeit den Inhaltstyp ändern. Mediaelemente und Texte bleiben in der Datenbank erhalten und sind nach dem Zurückschalten wieder sichtbar.

Reiter "Media"

Um ein einfaches Textelement anzulegen reicht es, im "Text & Media"-Element mit dem Reiter "General" zu arbeiten. Hier können Sie den Inhaltstyp festlegen, eine Überschrift bestimmen und im Rich Text Editor (RTE) Texte eingeben und Links setzen.

Wenn Sie Ihr Contentelement noch mit weiteren Elementen ausstatten möchten, können Sie dies im Reiter "Media" (Bild 1) tun:

  1. Hier können Sie verschiedene Mediaelemente aus der Filelist, von Ihrem Rechner oder aus dem Internet zum Contentelement hinzufügen. Es öffnet sich ein Dialogfenster, in dem Sie entweder existierende Dateien auswählen oder neue Dateien zur Filelist hinzufügen können.
  2. Dies ist eine Liste der möglichen Dateiendungen, die Sie als Mediaelement hinzufügen können. Andere Arten von Dateien können mit dem CE Text & Media nicht dargestellt werden.
  3. Elemente, die Sie bereits Ihrem CE hinzugefügt haben, werden hier aufgelistet. Hier haben Sie die Möglichkeit einzelne Elemente zu deaktivieren, zu löschen oder zu bearbeiten.
  4. Hier können Sie die Größe jedes einzelnen Mediaelements festlegen. Die Einstellungen wirken sich auf jedes Element gleich aus. Es ist nicht möglich Sondereinstellungen für einzelne Elemente festzulegen. Werden keine Einstellungen vorgenommen, werden die Elemente entsprechend ihrer Originalgröße und den Einstellungen unter Punkt 5 dargestellt.
  5. Hier können Sie festlegen, wie Ihre Mediaelemente im Verhältnis zum Text positioniert werden sollen. Es kann nur eine Auswahl getroffen werden, die für alle Elemente gilt.
  6. Hiermit wird die besonders für Bilder und Bildergalerien relevante "Enlarge on Click"-Funktion für alle Elemente aktiviert.

Hinweis

Auf dieser Seite wird von Mediaelementen gesprochen, um die Allgemeingültigkeit der Anleitung zu unterstreichen.

In den meisten Anwendungsfällen werden Sie einfache Bilder in unterschiedlichen Dateiformaten einbinden. Dazu gibt es weiterführende Anleitungen zum Einrichten von Bildergalerien und Slideshows.

Andere Mediaelemente, die Sie einbinden können, sind Dokumente (PDF), Audioaufnahmen und Videos. Dazu gibt es eine eigene Anleitung.

Medien hinzufügen

Klicken Sie im Reiter Media auf Add media file (Bild 1, Nr. 1). Es öffnet sich ein Pop-Up (Bild 2). Es handelt sich hierbei um den Inhalt der Filelist. Jetzt haben Sie die Möglichkeit ein oder mehrere Mediaelemente Ihrem Contentelement hinzuzufügen:

  1. Hier sehen Sie die Baumstruktur der Filelist. Wir empfehlen Ihnen beim Erstellen dieser Struktur dem Aufbau Ihres Seitenbaumes zu folgen, damit Sie leicht den Überblick behalten und Ihre Dateien schnell finden.
  2. Hier werden die aktuell im ausgewählten Ordner vorhandenen Dateien angezeigt. Sie können diese Dateien direkt auswählen und Ihrem CE hinzufügen. Klicken Sie dazu auf die gewünschte Datei oder setzen Sie einen Haken bei mehreren gewünschten Dateien (Bild 2; grüne Box; a) und bestätigen Sie die Auswahl (Bild 2; grüne Box; b).
  3. Wenn die Datei, die Sie einbinden möchten noch nicht in der Filelist vorhanden ist, können Sie diese direkt von ihrem eigenen Rechner hochladen: Klicken Sie auf "Durchsuchen..." (Bild 2; grüne Box; c) und wählen im Dateiverzeichnis Ihres Rechners die gewünschten Dateien aus. Bestätigen Sie Ihre Auswahl mit "Upload files" (Bild 2; grüne Box; d) und die Dateien werden in das angezeigte Verzeichnis der Filelist hochgeladen. Danach können Sie wie in Punkt 2 beschrieben fortfahren.
  4. Ebenso können Sie ein Video aus Youtube oder Vimeo der Filelist hinzufügen. Tragen Sie dazu die URL ihres Videos in das Feld ein und bestätigen es mit "Add media". Dadurch wird nicht das komplette Video in Ihre Filelist geladen sondern lediglich ein Verweis auf die externe Quelle. Sie können aber mit diesem Verweis ebenso, wie in Punkt 2 beschrieben, arbeiten. Für das Arbeiten mit Videoelementen gibt es eine detailiere Anleitung.

Wichtig: Erst nachdem Sie das Contentelement gespeichert haben, sind die Bilder im Inhalt eingebunden und im Frontend sichtbar.

Achtung!

Neben " Add media file" finden Sie in Bild 1 die beiden Shortcuts "Select & upload files" und "Add media by URL", mit denen Sie Dateien von Ihrem Rechner bzw. Verweise von YouTube oder Vimeo in einem Schritt hochladen und Ihrem CE hinzufügen können. So hinzugefügte Elemente werden in der Filelist automatisch im Ordner "_my_direct_uploads" gespeichert.

Beachten Sie, dass dieser Ordner sich dadurch sehr schnell füllen kann und unübersichtlch wird.

Reihenfolge der Elemente ändern

Jedes Mediaelement, das Sie dem CE hinzugefügt haben, erscheint in einer Liste im Reiter Media.

Um die Reihenfolge der Elemente zu verändern, müssen Sie die Vorschaukästen mit Drag & Drop verschieben. Klicken und halten Sie den „Festhalter“ (Bild 3) und ziehen das Bild an die gewünschte Position.

Bildunterschrift und Alternativtext

Jedes Bildelement lässt sich durch Anklicken der grauen Zeile mit dem Vorschaubild auf- und zuklappen. Aufgeklappt sehen Sie die Felder für Elementtexte und Verlinkung (Bild 4).

Sind in Ihren Elementen zentral Metadaten hinterlegt, erscheinen diese in den Feldern "Alternative Text" und "Description (Caption)". Prüfen Sie in diesem Fall, ob der Alternativtext oder die Bildunterschrift passend ist. Wenn nicht, haben Sie die Möglichkeit diese zu überschreiben, indem Sie die entsprechende Checkbox "Set element specific value (No default)" aktivieren und den gewünschten Text in die Textbox schreiben.

Bildunterschrift

Tragen Sie im Feld Description (Caption) (Bild 4, Nr. 4) eine Bildunterschrift ein. Die Bildunterschrift wird unter dem jeweiligen Bild angezeigt. Die Bildunterschrift erläutert das Bild näher und enthält bei Bedarf auch die Angabe zum Urheber (Copyright).

Alternativtexte

Tragen Sie in das Feld Alternative Text (Bild 4, Nr. 2) ein knappe und objektive Beschreibung des Bildinhaltes ein. Der Mehraufwand beläuft sich oft nur auf wenige Sekunden. Hilfestellungen zur Formulierung finden Sie im Abschnitt Alternativtexte für Bilder und Grafiken schreiben.

Alternativtexte helfen sehbeeinträchtigten Menschen und unterstützen die Suchmaschinenoptimierung (SEO). Blinde Menschen nutzen einen sogenannten Screenreader, um sich die Inhalte auf Webseiten vorlesen zu lassen. Was auf einem Bild zu sehen ist, erfährt ein Screenreader-Nutzer erst durch den Alternativtext. Auch Suchmaschinen bewerten die maschinenlesbaren Informationen auf einer Website. Sie werden oft als größte blinde Nutzer im Internet bezeichnet.

Element als Link

Sie haben auch die Möglichkeit bei einem Bild einen Link zu hinterlegen. Dazu fügen Sie die URL in das Feld Link ein (Bild 4, Nr. 3).

Tragen Sie als Alternativtext einen Text ein, der das Ziel des Links wiedergibt. Weitere Informationen im Abschnitt Das Bild ist ein Link.

Beachten Sie, dass Sie nicht gleichzeitig "Enlarge on Click" und einen Link in ein Element setzen können.

Titel

Es ist dringend zu empfehlen das Feld Title (Bild 4, Nr. 1) bei Bildern und Links freizulassen.

Sie können nicht sicher sein, ob Nutzer die Informationen im Title überhaupt erhalten: alle Nutzer mit Touch-Devices (Mobile, Tablet,…) bekommen die Informationen nicht angezeigt, bei Nutzern von Screenreadern hängt es von der individuellen Konfiguration ab.

Auf den Seiten der TUM wird das Feld Title aus Kombatibilitätsgründen vorerst beibehalten.

Technische Hintergrundinformationen zum Thema Title:
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 (engl)
HTML5 Accessibility Chops: title attribute use and abuse (engl)

Alternativtexte für Bilder und Grafiken schreiben

Das Bild ist rein dekorativ

Bei rein dekorativen Bildern lassen Sie das Feld Alternative Text leer. In der Praxis ist es oft schwer zu entscheiden, ob ein Bild rein dekorativ ist. Ein Bild ist dann dekorativ, wenn Sie das Bild weglassen können, ohne dass dabei die Aussage oder das Verständnis der Webseite beeinträchtigt wird.

Das Bild ist ein Link (Funktionale Grafik)

Ist das Bild ein Link muss das Feld Alternative Text anstelle einer Bildbeschreibung eine Aussage über das Linkziel enthalten. Der Alternativtext wird als Linktext vorgelesen.

Beispiel: Der Alternativtext eines verlinkten Logos sollte den Firmenname beinhalten.

Das Bild ist informativ

In den meisten Fällen handelt es sich um informative Bilder. Ein guter Alternativtext sollte kompakt, objektiv und kontextspezifisch den Inhalt des Bildes beschreiben.

Checkliste

  • Kompakt:
    Schreiben Sie verständlich und möglichst kurz (nicht länger als ca. 90 Zeichen).
  • Objektiv:
    Beschreiben Sie sachlich, ohne Interpretationen und Meinungen.
  • Kontextspezifisch:
    Beschreiben Sie die Aspekte des Bildes, die für das Verständnis auf der dazugehörigen Seite wichtig sind.
  • Direkt:
    Beginnen Sie direkt mit der Beschreibung. Vermeiden Sie unnötige Formulierungen wie „Das Bild zeigt ...“.
  • Keine Doppelung:
    Informationen aus der Bildunterschrift sollen nicht wiederholt werden.

Das Bild zeigt einen Schriftzug

Texte in Bildern müssen in den Alternativtext übertragen werden.

Sogenannte „Nur-Text Bilder“ sollten vermieden werden.

Weitere Möglichkeiten der Präsentation

Vergrößern (Enlarge on click)

Die Funktion, Bilder beim Klicken vergrößert anzuzeigen, aktivieren Sie mit der Option Enlarge on Click (Bild 1, Nr. 6). Weitere Informationen dazu finden Sie in der Beschreibung zur Bildergalerie-Funktion.

Beim Einbinden von anderen Elementen als Bildern hat das Auswählen von Enlarge on Click keine Auswirkung. Bei Videos beispielsweise können Sie weiterhin die Bedienelemente benutzen.

Slideshow

Um mehrere Bilder in einer Diaschau anzuzeigen, folgen Sie der Anleitung zur Einrichtung einer Slideshow.

Größe und Anordnung

Änderung der Elementgrößen

Sie haben die Möglichkeit, die Größe Ihrer Elemente zu ändern. Dies ist im Reiter Media unter Media Adjustments möglich (Bild 1, Nr. 4). Hierbei müssen Sie entweder Breite oder Höhe eingeben. Der andere Wert wird automatisch proportional zu der ursprünglichen Elementgröße berechnet.

Textfluss um das Element

Den Textfluss um das Element können Sie im Reiter Media unter Gallery Settings bestimmen (Bild 1, Nr. 5). Wählen Sie entweder aus der Dropdown-Liste oder den kleinen Vorschaubildchen.

Mehrere Elemente nebeneinander

Wollen Sie mehrere Bilder nebeneinander positionieren, wählen Sie im Reiter Media - Gallery Settings unter Number of Columns die entsprechende Zahl aus (Bild 1, Nr. 5).

Empfohlene und maximale Bildgrößen

Die maximale Breite von Bildern in der Hauptspalte ist 950 Pixel beim zwei-spaltigen Seitenlayout (ohne rechte Spalte), und 720 Pixel bei drei-spaltigen Seitenlayout. Die maximale Breite für Bilder in der Enlarge-on-click-Funktion ist 1200 Pixel

Für Anordnungen von Bildern neben dem Text oder in mehreren Spalten nebeneinander werden diese Maße entsprechend verringert. 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 wird durch dieses Skalieren möglicherweise schlechter. Je größer der Skalierungs-Schritt, umso deutlicher verschlechtert sich das Bild. Sie sollten also Bilder vor dem Hochladen an Ihrem Computer mit einem geeigneten Bildbearbeitungsprogramm so skalieren, dass TYPO3 Ihre Datei direkt verwenden kann. Das gilt insbesondere für Fotos, die Sie von einer Digitalkamera übernehmen, und dann, wenn das Original-Format erhalten bleiben soll. (GIF oder PNG werden sonst als JPEG ausgegeben.)