Inhaltselement: Text

Dieses Inhaltselement fügt dem Artikel einen Text und bei Bedarf weitere Inhalte wie z. B. ein Bild hinzu. Hierfür steht ein integrierter Rich Text Editor namens TinyMCE zur Verfügung, mit dem Sie - ähnlich wie in Microsoft Word - den Text formatieren können. Wie Sie den Rich Text Editor benutzen, wird in Kapitel Der Rich Text Editor (TinyMCE) beschrieben.

Die Funktionen des Rich Text Editors sind sehr mächtig, sodass Sie damit auch die Funktionen fast aller anderen Inhaltselemente durchführen können. Dennoch macht es meist Sinn, dass Sie auf das jeweils spezialisierte Inhaltselement zurückgreifen und so z. B. eine simple Tabelle mit dem wesentlich leichter bedienbaren Tabellen-Inhaltselement  (siehe Abschnitt Inhaltselement: Tabelle) erstellen.

Überschrift

Geben Sie die gewünschte Überschrift in das Textfeld ein. Mit dem Ausklappfenster rechts daneben können Sie die semantische Hierarchie der Überschrift festlegen. Die wichtigste Überschrift der Seite wird als h1 angegeben (meist nur eine pro Seite), während die Werte h2 bis h6 hierarchisch niedrigere Überschriften abbilden und natürlich mehrfach vorkommen.

Hinweis

Bemühen Sie sich um eine hierarchisch logische Struktur der Überschriften auf einer Seite. Sie unterstützen damit z. B. blinde Besucher, da diese den Inhalt eines Textes mithilfe einer guten Überschriftenhierarchie leichter erfassen können.

Text

Pflichtfeld

Die Bedienung des Rich Text Editors wird in Kapitel Der Rich Text Editor (TinyMCE) ausführlich beschrieben.

Rich Text Editor

Ein Bild hinzufügen

Mit dieser Funktion können Sie die Bildfunktion von Contao nutzen und damit ein Bild zum Text dazu fügen, das vom Text links oder rechts umflossen bzw. drüber oder darunter platziert wird.

Wenn Sie den Haken bei Ein Bild hinzufügen setzen, werden darunter die weiteren Bildfunktionen eingeblendet.

Quelldatei

Pflichtfeld, wenn der Haken bei Ein Bild hinzufügen gesetzt ist.

Hier legen Sie fest, welches Bild hinzugefügt werden soll.

Falls das Bild noch nicht im Dateisystem der Webseite hinterlegt ist, können Sie auf das Symbol Dateimanager in einem Popup-Fenster öffnen rechts neben der Abschnittsüberschrift Quelldatei klicken. So können Sie die Dateiverwaltung für das Hochladen des Bildes nutzen, ohne dabei den Eingabemodus des Inhaltselements zu verlassen. Die Benutzung der Dateiverwaltung wird im Kapitel Die Dateiverwaltung beschrieben.

Wenn das Bild hingegen schon im Dateisystem der Webseite verfügbar ist, müssen Sie einen Haken bei Auswahl ändern setzen. Dadurch öffnet sich die Dateiansicht.

Zum Text ein Bild hinzufügen

Hinweis

Der für Sie sichtbare Inhalt des Dateisystems hängt von den Einstellungen ab, die der Administrator für Ihre Benutzergruppe eingestellt hat. Es kann daher sein, dass Sie nur ein paar Dateien sehen, oder aber viele Ordner, Unterordner und darin abgelegte Dateien.

Klicken Sie im Dateisystem auf die Symbole Bereich öffnen/Bereich schließen vor den Ordnernamen. Dadurch klappt der Ordner auf und Sie können den darin hinterlegten Inhalt (weitere Ordner oder Dateien) sehen.

Wählen Sie das gewünschte Bild aus, indem Sie in das runde Feld rechts neben dem Dateinamen klicken.

Bild im Dateisystem auswählen

Alternativer Text

Sie sollten für Bilder möglichst immer einen Alternativtext, sprich eine Kurzbeschreibung des Bildinhaltes angeben. Das wirkt sich einerseits positiv für blinde Nutzer aus. Andererseits dient es auch für Suchmaschinen als Informationsquelle, da diese genauso wie blinde Besucher sonst nicht erkennen können, was auf dem Bild zu sehen ist.

Bildbreite und Bildhöhe

Wenn Sie in diese Felder nichts eintragen, zeigt Contao das Bild in seiner Originalgröße an. Falls Sie Angaben für die Bildbreite und/oder Bildhöhe machen, zeigt Contao das Bild auf der Webseite mit den entsprechenden Maßen an. Das Originalbild bleibt dabei unverändert im Dateisystem erhalten, sodass Sie es ohne Probleme mehrfach in der Webseite mit unterschiedlichen Maßen einbinden können.

Achtung

Sie sollten Bilder über diese Funktion niemals vergrößern, sondern nur verkleinern! Wenn Sie Bilder technisch künstlich vergrößern, ergibt das abhängig vom Grad der Vergrößerung meist ein sehr unsauberes Ergebnis.

Geben Sie in das erste Feld die Bildbreite und in das zweite Feld die Bildhöhe (in Pixel) ein. Daneben können Sie im Ausklappfenster wählen, nach welchem Prinzip das Bild skaliert werden soll. Standard ist hierbei die Einstellung Exaktes Format.

Hinweis

Wenn Sie nur einen Wert angeben (Bildhöhe oder Bildbreite), ist es irrelevant, welchen Skalierungstyp Sie wählen. Contao greift dann automatisch auf die proportionale Skalierung zurück.

Vermeiden Sie Formatwechsel! Wenn das Originalbild z. B. ein horizontales Format hat, sollten Sie es möglichst nicht auf ein vertikales Format skalieren.

Exaktes Format

Die kürzere Seite des Bildes wird auf das vorgegebene Maß skaliert, während die längere Seite exakt beim angegebenen Maß abgeschnitten wird. Die Skalierung geht von der Mitte des Bildes aus.

Das Bild entspricht exakt dem Zielmaß.

Achtung

Das Ergebnis kann beim Exakten Format problematisch sein, falls sich wichtige Bildbestandteile auf dem abgeschnittenen Bereich befinden.

Proportional

Wenn die Originalbreite größer als oder gleich groß wie die Originalhöhe ist, dann passt Contao die Originalbreite exakt auf die neue Zielbreite an und skaliert die Originalhöhe proportional dazu.

Falls die Originalbreite kleiner als die Originalhöhe ist, passt Contao hingegen die Originalhöhe exakt auf die neue Zielhöhe an, während die Originalbreite proportional dazu skaliert wird.

Achtung

Das Bild kann das vorgegebene Maß auf der kürzeren Seite unter- oder überschreiten.

An Rahmen anpassen

Hierbei rechnet Contao mit der Formel (Originalhöhe * Zielbreite / Originalbreite). Wenn die Zielhöhe kleiner oder gleich dem Ergebnis der Formel ist, dann passt Contao die Originalbreite exakt auf die neue Zielbreite an, während die Originalhöhe proportional dazu skaliert.

Falls die Zielhöhe hingegen größer ist als das Ergebnis der Formel, passt Contao die Originalhöhe exakt auf die neue Zielhöhe an, während die Originalbreite proportional dazu skaliert.

Achtung

Das Bild überschreitet das vorgegebene Maß auf keinen Fall, kann aber kleiner sein.

Bildabstand

Hier können Sie den Abstand des Bildes zu den umgebenden Elementen bestimmen. Befüllen Sie die ersten vier Felder bei Bedarf mit einem Abstandswert:

  • Feld: Abstand nach oben
  • Feld: Abstand nach rechts
  • Feld: Abstand nach unten
  • Feld: Abstand nach links

Mit der Auswahl einer Option im nachfolgenden Ausklappfenster legen Sie die verwendete Maßeinheit fest. Die üblichsten Einheiten sind px (Pixel), % (Prozent) und em.

Hinweis

Geben Sie Abstände möglichst nur nach Absprache mit Ihrem Webdesigner ein, da derartige Anweisungen im Idealfall global vom Webdesigner definiert werden. Dadurch ist sichergestellt, dass die Abstände auf der ganzen Webseite identisch sind und sich ein gleichmäßiges Formatierungsbild ergibt.

Bildlink-Adresse

Sie können das Bild hier mit einem Link versehen, sodass der Besucher auf die Zielseite weitergeleitet wird, wenn er auf das Bild klickt. Wenn Sie diese Funktion nutzen, ist der Einsatz der Großansicht (Lightbox-Effekt) nicht mehr möglich.

Zu einer internen Seite verlinken

Klicken Sie rechts neben dem Eingabefeld auf das Seitenwähler-Symbol. Es öffnet sich ein kleines Browser-Fenster, in dem Sie aus dem Ausklappfenster die gewünschte Seite auswählen können. Bestätigen Sie die ausgewählte Seite mit einem Mausklick oder der Enter-Taste. Contao schreibt nun in das Eingabefeld eine kryptische Angabe wie z. B. {{link_url::14}}. Dabei handelt es sich um ein sogenanntes Insert-Tag, also einen technischen, internen Aufruf der Seite im CMS. Mehr über Insert-Tags erfahren Sie im Abschnitt Insert-Tags – Platzhalter für Inhalte.

Bild-Link zu einer internen Seite

Zu einer externen Seite verlinken

Schreiben Sie einfach in das Eingabefeld die Adresse der externen Webseite.

Achtung

Geben Sie den Link zur externen Webseite unbedingt mit http:// am Anfang ein!

Falsch: www.contao.org
Korrekt: http://www.contao.org

Großansicht/Neues Fenster

Setzen Sie hier den Haken, wenn Sie für das Bild die Großansicht (Lightbox-Effekt) aktivieren wollen. Wenn der Besucher dann auf das Bild klickt, öffnet sich das Bild in einem kleinen Extrafenster in Originalgröße.

Achtung

Dieser Effekt funktioniert nur, wenn das Feld der Bildlink-Adresse leer ist. Außerdem muss Ihr Administrator für die Webseite im Seitenlayout die Mediabox oder Slimbox aktiviert haben.

Bildunterschrift

Sie können dem Bild hier eine kurze Bildunterschrift zuweisen.

Bildausrichtung

Legen Sie hier fest, wie das Bild im Verhältnis zum Text ausgerichtet ist. Solange Sie nichts auswählen, wird es oberhalb des Textes ausgegeben.

  • Oberhalb: Bild wird über dem Text platziert und es findet kein Textumfluss statt
  • Linksbündig: Bild wird links platziert und rechts vom Text umflossen
  • Rechtsbündig: Bild wird rechts platziert und links vom Text umflossen
  • Unterhalb: Bild wird unter dem Text platziert und es findet kein Textumfluss statt

Element schützen

Setzen Sie hier den Haken, wenn Sie möchten, dass dieses Inhaltselement nur für angemeldete Mitglieder auf der Webseite (Frontend) sichtbar ist. Für unangemeldete Besucher wird es nicht angezeigt.

Erlaubte Mitgliedergruppen

Pflichtfeld, wenn Element schützen ausgewählt ist.

Sobald Sie den Haken bei Element schützen gesetzt haben, werden darunter die vorhandenen Mitgliedergruppen eingeblendet. Klicken Sie in die Felder der Mitgliedergruppen, die das Inhaltselement sehen sollen, wenn sie auf der Webseite angemeldet sind.

Nur Gästen anzeigen

Diese Funktion bewirkt genau das Gegenteil von Element schützen. Das Inhaltselement ist für normale Besucher der Webseite sichtbar und wird ausgeblendet, sobald sich der Besucher als Mitglied anmeldet.

Hinweis

Wenn Sie irrtümlich die Funktionen Element schützen und Nur Gästen anzeigen gleichzeitig ausgewählt haben, setzt sich die Schutzfunktion durch.

CSS-ID/Klasse

Hier können Sie dem Inhaltselement eine neue CSS-ID (ins erste Feld) und -Klassen (ins zweite Feld) zuweisen. Die notwendigen Angaben hierfür erhalten Sie normalerweise von Ihrem Webdesigner oder Administrator.

Abstand davor und dahinter

Im ersten Feld können Sie den Abstand vor und im zweiten Feld den Abstand nach dem Inhaltselement in Pixel festlegen.

Hinweis

Geben Sie Abstände möglichst nur nach Absprache mit Ihrem Webdesigner ein, da derartige Anweisungen im Idealfall global vom Webdesigner definiert werden. Dadurch ist sichergestellt, dass die Abstände auf der ganzen Webseite identisch sind und sich ein gleichmäßiges Formatierungsbild ergibt.