Das Inhaltselement "Text & Medien"

Die Inhaltselemente Text und Nur Bilder aus TYPO3-Vorläuferversionen gibt es nicht mehr. Das ehemalige Element Text und Bilder wurde mit weiteren Funktionen stark erweitert und heißt jetzt Text & Medien. Neben einem oder mehreren Bildern ist es nun auch möglich, Film- oder Audiodateien, HTML-Objekte u. a. m. in einer Vielzahl von Formaten einzubinden.

Texte können mit einem automatischen  2- oder 3-Spaltenumbruch versehen werden.

Ein Bild hat keine "festen" Größen mehr, in denen es präsentiert wird, sondern wird stets auf 100 % der verfügbaren Spaltenbreite des Inhaltselementes skaliert; zudem läßt es sich für die lokale Verwendung gezielt auf Teilausschnitte zuschneiden. Damit "kleine" Bilder dabei nicht zu unscharfen Bildern vergrößert werden, sollten alle Bilder im Original möglichst groß vorliegen (Obergröße = 1280 px)

Das ganze Element läßt sich a) für alle Endgeräte oder b) nur für mobile Endgeräte "zugeklappt", d. h. auf die Überschriftenzeile reduziert, präsentieren

Die wichtigsten Neuerungen

  • unterschiedliche Medienobjekte
  • mehrspaltiger Text
  • automatische Bildskalierung
  • Bild-Zuschneidefunktion
  • Auf- und Zuklapp-Funktion

"Text & Medien" - Elemente erstellen

Step 1 - Ein noch unbestimmtes Inhaltselement anlegen

Auf gewünschter Seite an gewünschter Position die Schaltfläche Neues Inhaltselement erstellen (a) wählen

Step 2 - Den Typ des Elementes festlegen

Im Übersichtsregister der Inhaltselemente auf der Registerkarte Typischer Seiteninhalt (b) das Element Text & Medien (c) wählen

Step 3 - Die Registerkarte "Allgemein" ausfüllen

Auf der Registerkarte Allgemein (d) im Formularfeld Überschrift (e) eine Überschrift eingeben (max. 255 Zeichen) und den Typ (f) der Überschrift festlegen:

  • h1 ist die oberste Ebene und sollte auf einer Seite nur einmal (!) vorkommen
  • h2, h3 und h4 werden typografisch jeweils etwas kleiner gesetzt
  • Überschriften vom Typ "verborgen" werden im Frontend nicht gezeigt, sind aber im Backend zu sehen, was sinnvoll und hilfreich ist. Andernfalls sind im Backend oft Listen von Elementen zu sehen, in denen alle den gleichen Titel [Kein Titel] haben!

Im Formularfeld Text  (g) den Text eingeben:
Die zu berücksichtigenden Möglichkeiten und  Besonderheiten bei Eingabe, Formatierung etc.  werden im Tutorial Rich Text Editor (RTE) behandelt.

Step 4 - Die Registerkarte "Medien" ausfüllen

Bild 1/3:
Auf der Registerkarte Medien (h) die Schaltfläche Mediendatei hinzufügen (i) wählen

Bild 2/3:
Im erscheinenden Verzeichnisbaum (j)  die gewünschte Datei auswählen - gfs. auch mehrere (k). Zur Objektauswahl sowie weitere Infos zum Verzeichnisbaum vgl. Tutorial Verwendung der Dateiliste.

Bild 3/3:
Zurück auf der Registerkarte Medien (l) im zum Bild gehörenden Formularbereich die Bild-Metadaten (m) eingeben, soweit sie nicht schon zusammen mit dem Bild aus der Dateiliste übernommen wurden:

  • Titel (n): ein optionaler Text, der im Frontend bei "mouse-over" erscheint
  • Alternativer Titel (o):ein für die barrierefreie Gestaltung unabdingbarer, das Bild beschreibender Text, der z. B. durch screenreader vorgelesen wird
  • Link (p): ein optionaler, beliebiger Hyperlink, der beim Klick auf das Bild ausgeführt wird
  • Beschreibung (q): eine in einem Balken unter dem Bild erscheinende Bildunterschrift; der leicht transparente Balken verdeckt u. U. Teile des Bildes.

Formularbereich Bildbearbeitung (r): Mit der Schaftfläche Editor öffnen (s) lässt sich im Folgefenster ein Bild pixelgenau auf bestimmte Teilausschnitte zurechtschneiden.

Formularbereich Verhalten (t): Ein Haken in der Checkbox Bei Klick vergrößern (u) sorgt für die Möglichkeit, ein Bild resp. alle Bilder via Klick in eigenen Fenstern vergrößert darzustellen. Ist für ein einzelnes Bild ein eigener Link ( s. o. bei den Meta-Daten) vereinbart, so hat jener Vorrang.

Ein Haken in der Checkbox Als Galerie anzeigen (v) bewirkt, dass mehrere eingebundene Bilder "übereinander" erscheinen und der Stapel mit Vor- und Rückwärtspfeilen durchgeblättert werden kann. Ohne den Haken erscheinen die Bilder stets untereinander. In dieser Galerie-Funktion ist die Klickvergrößerung mit inbegriffen.

Step 5 - Die Registerkarte "Erscheinungsbild" ausfüllen

Funktionen auf der Registerkarte Erscheinungsbild (w) im Formularbereich Layout des Inhaltelementes:

Bild 1: Mit den Optionen im Dropdown-Menü Text automatisch auf Spalten aufteilen (x) läßt sich INNERHALB des Textbereiches ein 2- oder 3-Spaltensatz erzeugen.

Bild 2: Mit den Optionen im Dropdown-Menü Accordion Funktion für Text (y) läßt sich für alle oder aber nur für mobile Geräte einstellen, dass ein Inhaltselement sich via Klick auf die Überschriftenzeile "zu- und aufklappen" lässt. Diese Reduziermöglichkeit setzt natürlich voraus, dass das Formularfeld Überschrift auch ausgefüllt ist.

Bild 3: Die relative Positionierung von Text zu Bild erfolgt im Formularbereich Galerie-Einstellungen (z):

  • Vier Optionen sind verfügbar: Der Text umfließt das Bild NICHT, sondern steht unterhalb oder oberhalb oder links oder rechts vom Bild.
  • Ein oben oder unten stehende Bild wird stets auf 100 % der verfügbaren Spaltenbreite des Inhaltselementes skaliert. Ein links oder rechts stehendes Bild teilt sich die maximale Spaltenbreite hälftig mit dem Text.
  • Sind nicht nur ein Bild sondern mehrere Bilder eingebunden, stehen sie untereinander; es sei denn, auf der Registerkarte Medien (s. o.) ist Als Galerie anzeigen vereinbart.



Beispiele für Text-Medien-Kombinationen

Text allein

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

... hier wurde auf der Registerkarte Medien kein Medium hinzugewählt; die Karte blieb leer ...
... auf der Registerkarte Erscheinungsbild wurde für den Text ein 2-Spaltensatz vereinbart ...

Text und Bild

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

... hier wurde über die Registerkarte Medien ein Bild ausgewählt ...
... auf der Registerkarte Erscheinungsbild wurden a) Bild-Position und -Ausrichtung, sowie b) die Accordion-Funktion (=Reduziermöglichkeit auf die Überschriftenzeile) eingestellt ...

Text und Film

Rüdiger Grobe: "Was sind Pivot-Tabellen?"

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

... hier wurde über die Registerkarte Medien ein Film ausgewählt ...
... auf der Registerkarte Erscheinungsbild wurden Position und Ausrichtung des Players festgelegt ...

Text und Ton

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

"Wind Nr. 5" | Quelle: Musisches Zentrum der Universität Ulm

... hier wurde über die Registerkarte Medien eine Audio-Datei ausgewählt ...
... auf der Registerkarte Erscheinungsbild wurden Position und Ausrichtung des Players festgelegt ...

Korrekturvorschläge,
Anmerkungen bitte an:

Rüdiger Grobe
kiz  |  uni ulm