Inhaltselement: Text & Medien

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 - 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.

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: 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.

Anmerkung

Bei den Raster- und Spaltenelementen kann unter Erscheinungsbild // Layout-Auswahl (v) // Graue Box das Layout der Elemente entsprechen 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.