Inhaltselement "Text&Medien"
Anleitung mit Übung
Über das Inhaltselement
Das Text&Medien-Element ist das wichtigste Inhaltselement. Es wird verwendet um Texte, sowie Medien auf den Webseiten einzubinden.
Verwendung:
- klassischer Seiteninhalt
- Texte mit/ohne Bilder
- Bilder/Videos mit/ohne Text
- Galleriedarstellung für viele Medien in mehreren Spalten möglich
- Beste Darstellung mit einem Bild mit Layout "neben Text rechts/links" und "im Text rechts/links" auf 100% Seitenbreite.
- In Gridelementen von 66% oder kleiner sollte der Text über/unter den Bildern stehen. Layouts: oben/unten
So sieht es aus
Live Ansicht des Inhaltselements
Kafka
Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen.
Schritt für Schritt
Bebilderte Anleitung
Schritt 1: Anlegen eines Text&Medien Elements
Klicken Sie zum Anlegen des Elements auf das "+ Inhalt-Icon" im Bearbeitungsbereich der Zielseite. Anschließend wählen Sie unter dem Reiter "Typischer Seiteninhalt" das "Text&Medien"-Element aus. Im Anschluss öffnet sich das Bearbeitungsmenü des Elements automatisch.
Schritt 2: Anlegen des Inhalts
Vergeben Sie zunächst unter dem Reiter "Allgemein" eine Überschrift. Anschließend legen Sie den Typ/das Layout der Überschrift fest. Nun legen Sie unten im Texteditor den gewünschten Inhalt des Text&Medien Elements an.
Hinweise zum Überschriftenlayout: Das Layout bestimmt die Größe der Überschrift, wobei Layout 1 die größte und Layout 6 die kleinste Größe darstellt. Im Typo3 ist standardmäßig das Layout "Standard" voreingestellt, dieses entspricht Layout 2. Wenn Sie das Layout "Verborgen" auswählen, ist die Überschrift nur im Backend sichtbar und bleibt den Seitenbesuchern somit verborgen. Verwenden Sie das Layout 1 nur einmal pro Seite, dies verbessert das Suchmaschinenranking Ihrer Seite!
Schritt 3: Hinzufügen eines Bildes (optional)
Einbinden einer Mediendatei
Um eine Mediendatei einzubinden gehen Sie zunächst auf den Reiter "Medien" und klicken anschließend auf den Button "Mediendatei hinzufügen". Anschließend werden Sie zur Dateiliste weitergeleitet und wählen dort das gewünschte Bild aus. Alternativ können Sie auch durch einen Klick auf "Datei auswählen und hochladen" eine lokale Datei direkt einbinden.
Es empfiehlt sich eine Pixelbreite von 1200px bei 100 % Seitenbreite in der Desktopansicht. Und mindestens 750px bei 50 % Seitenbreite in der Desktopansicht. So sind die Bilder groß genug für alle möglichen Ansichten.
Bitte beachten Sie, dass die Mediendatei bei der Option "Datei auswählen und hochladen" in der Dateiliste im Ordner "user_upload" gespeichert wird. Dies erschwert Ihnen und anderen Redakteur*innen unter Umständen das Aufinden dieser Datei in der Dateiliste.
Hinterlegen von Metadaten
Nach dem Einbinden eines Bildes fügen Sie bitte unter dem Bereich "Bild-Metadaten" den "Alternativen Text" und die "Bildbeschreibung" ein. Dies dient in erster Line der Barrierefreiheit. Sollten Sie diese bereits in der Dateiliste hinterlegt haben, werden diese automatisch vorausgefüllt.
Bildbearbeitung
Unter dem Bereich Bildbearbeitung können Sie das Seitenverhältnis des Bildes in Abhängigkeit von der zur Verfügung stehenden Bildschirmgröße festlegen. Dies dient dazu die Bilddarstellung für die Ausgabe auf verschiedenen Endgeräten zu optimieren. Um das Seitenverhältnis in Abhängigkeit von der zur Verfügung stehenden Bildschirmgröße festzulegen klicken Sie auf "Editor öffnen" und legen Seitenverhältnisse für die entsprechenden Bildschirmgrößen fest. Die Größe "Extra Large" entspricht hierbei einem großen PC-Monitor und "Sehr Klein" einem Smartphonedisplay.
Tipp: Um das Ergebniss zu überprüfen können Sie das "Anzeigen-Modul" verwenden. Alternativ können Sie sich die Seite anzeigen lassen, Ihr Browserfenster minimieren und dessen Größe entsprechend variieren.
Hinweis: Der Editor dient lediglich zum Festlegen von Seitenverhältnissen. Sonstige Bildbearbeitungsoptionen bietet er nicht.
Medienanpassungen
Unter dem Bereich Medeinanpassungen können die dem Bild zur Verfügung stehende Höhe und Breite festlegen. Sind mehrere Bilder eingebunden, gilt diese Einstellung für alle Bilder.
Galerieeinstellungen
Unter "Position und Ausrichtung" legen Sie fest an welcher Stelle das Bild im Bezug zum Text positioniert wird.
Unter "Anzahl der Spalten" legen Sie die Anzahl der den Bildern zur Verfügung Spalten fest. Um mehrere Bilder nebeneinander darzustellen muss die Anzahl der zur Verfügung stehenden Spalten >1 betragen. Wie viele Bilder nebeneinander dargestellt werden können hängt jedoch auch von den entsprechenden Bildauflösungen, sowie der zugewiesenen Höhe und Breite ab.
Verhalten
Wenn Sie die Option "Bei Klick vergrößern" auswählen ermöglicht es dies den User*innen die Bilder per Klick zu vergrößern.
Schritt 4: Auswahl der Hintergrundfarbe (optional)
Um eine Hintergrundfarbe für das Text&Medien Element festzulegen, gehen Sie zunächst auf den Reiter "Erscheinungsbild". Dort wählen Sie im Bereich "Hintergrundfarbe" die gewünschte Rahmenfarbe aus.
Wichtig: Bitte nutzen Sie diese Option nur zum Hervorheben besonders wichtiger Elemente. Bunte Farben lenken gezielt die Blicke der User*innen. Zuviele Hervorhebeungen können den gegeteiligen Effekt haben.
TYPO3 Selbststudium
Übung
- Erstellen Sie einen Text mit Bild.
- Vergeben Sie die Überschrift "Winter"
- Fügen Sie "Der Winter ist auf die Jahreszeit, die sich zwischen Herbst und Frühling abspielt. Kennzeichnend für die Wintermonate auf der Nordhalbkugel ist, dass hier niedrige Temperaturen herrschen. Minusgrade sorgen für Bodenfrost und eine klare Luft. Das Wetter ist vor allem durch viele Schneefälle und Eisregen geprägt." als Text ein.
- Wählen Sie als Erscheinungsbild einen weißen Hintergrund aus.
- Fügen Sie ein Bild Ihrer Wahl ein.