Inhaltselement: Text & Medien

Das Inhaltselement "Text & Medien"

Im Element Text & Medien ist es möglich neben einem oder mehreren Bildern, 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

Benötigte Bilder in die sortierte Dateiliste einfügen. In Step 4 werden die Bilder direkt aus dieser Dateiliste geladen.

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

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

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.

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/suchen - gfs. auch mehrere. 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 eingeben, soweit sie nicht schon zusammen mit dem Bild aus der Dateiliste übernommen wurden:

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

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

Relative Positionierung von Text zu Bild erfolgt im Registerbereich Medien unter Galerie-Einstellungen:

Vier Optionen sind verfügbar: Der Text umfließt das Bild NICHT, sondern steht

unterhalb oder
oberhalb oder
links vom Bild 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.

Formularbereich Verhalten: Ein Haken in der Checkbox Bei Klick vergrößern (r) 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 (s) 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.

Mit einem Haken bei Aktiviere automatisches Sliden der Bilder (t) werden die Bilder mit der vorgegebenen Reihenfolge abgespielt. Es muss für diese Funktion zusätzlich die Checkbox Als Galerie anzeigen ausgewählt werden. Nur wenn beide Checkboxen ausgewählt sind werden die Bilder als Slider dargestellt.

Der Haken in der Checkbox Nicht strecken (u) verhindert das Bilder automatisch mit der Seitengröße vergrößert werden.

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:

Bei den Layout Auswahl können Sie im Dropdown-Menü Layout Auswahl Standard oder Graue Box auswählen, entsprechend dem Aussehen einer Grauen Box angepasst werden. Der Vorteil, die Elemente behalten ihre Funktionsweisen bei, d.h. es können Bilder-Text-Kombinationen als Graue Box dargestellt werden. Dies ist mit dem eigentlichen Graue Box-Element nicht möglich.

Beispiele finden Sie auf der Demo-Seite.