Inhaltselement: Hyperlink

Dieses Inhaltselement fügt dem Artikel einen Link zu einer internen Seite, einer externen Webseite, einer Multimedia-/Audio-Datei oder eine E-Mail-Adresse hinzu. Beides können Sie auch über das Text-Inhaltselement erstellen. Mehr darüber erfahren Sie im Abschnitt, Inhaltselement: Text.

Überschrift

Geben Sie die gewünschte Überschrift in das Textfeld ein. Mit dem Ausklappfenster rechts daneben können Sie die semantische Hierarchie dieser Ü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.

Link-Adresse

Füllen Sie hier den Link zum Ziel ein. Sie können hierfür drei verschiedene Wege wählen:

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 Informationen zu Insert-Tags erhalten Sie im Abschnitt Insert-Tags – Platzhalter für Inhalte.

Link zu einer internen Seite

Achtung

Achten Sie darauf, dass Sie das Seitenwähler-Symbol nur dann anklicken, wenn im Feld Link-Adresse keine Adresse zu einer externen Webseite mehr steht. Falls Sie dennoch darauf klicken, erhalten Sie im kleinen Browser-Fenster eine Fehlermeldung. Der Grund hierfür ist eine Sicherheitseinstellung von Contao.

Löschen Sie daher erst den Link aus dem Feld Link-Adresse und klicken Sie danach auf das Seitenwähler-Symbol.

Zu einer externen Seite verlinken

Schreiben Sie einfach in das Eingabefeld die Adresse der externen Webseite. Dabei kann es sich auch um einen Link zu einem Video (z. B. YouTube), einer Multimedia-Datei (mit der Dateiendung .swf, .flv oder .mp4) bzw. einer Audio-Datei (mit der Dateiendung .mp3) handeln.

Achtung

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

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

Eine E-Mail-Adresse verlinken

Wenn Sie als Ziel eine E-Mail-Adresse eingeben möchten, müssen Sie davor das Protokoll mailto: angeben (z. B. mailto:name@domain.de).

In neuem Fenster öffnen

Setzen Sie hier einen Haken, wenn die verlinkte Seite in einem neuen Browser-Fenster geöffnet werden soll.

Link-Text

Geben Sie hier einen Text ein, der statt der Link-Adresse auf der Webseite erscheinen soll. Statt http://www.contao.org würde der Besucher dann z. B. Offizielle Contao-Webseite sehen.

Lightbox

Hier können Sie durch die Eingabe eines sogenannten rel-Attributs die Effekte der Mediabox aufrufen.

Hier einige mögliche Varianten:

  • lightbox: Öffnet die verlinkte interne Seite in einem Mediabox-Fenster.
  • lightbox[800 600]: Öffnet die verlinkte interne Seite in einem Mediabox-Fenster mit einer Breite von 800 Pixeln und einer Höhe von 600 Pixeln.
  • lightbox[external]: Öffnet die verlinkte Webseite in einem Mediabox-Fenster.
  • lightbox[external 800 600]: Öffnet die verlinkte Webseite in einem Mediabox-Fenster mit einer Breite von 800 Pixeln und einer Höhe von 600 Pixeln. Sie können natürlich auch andere Maße angeben.
  • lightbox[social]: Öffnet das verlinkte Video (z. B. von YouTube) in einem Mediabox-Fenster.
  • lightbox[social 400 400]: Öffnet das verlinkte Video in einem Mediabox-Fenster mit einer Breite von 400 Pixeln und einer Höhe von 400 Pixeln. Sie können natürlich auch andere Maße angeben.
  • lightbox[flash]: Öffnet die verlinkte Multimedia-Datei (mit der Dateiendung .swf, .flv oder .mp4) in einem Mediabox-Fenster.
  • lightbox[flash 400 400]: Öffnet die verlinkte Multimedia-Datei (mit der Dateiendung .swf, .flv oder .mp4) in einem Mediabox-Fenster mit einer Breite von 400 Pixeln und einer Höhe von 400 Pixeln. Sie können natürlich auch andere Maße angeben.
  • lightbox[audio]: Öffnet die verlinkte Audio-Datei (mit der Dateiendung .mp3) in einem Mediabox-Fenster.
  • lightbox[audio 50% 20]: Öffnet die verlinkte Audio-Datei (mit der Dateiendung .mp3) in einem Mediabox-Fenster mit einer Breite von 50 % und einer Höhe von 20 Pixeln. Sie können natürlich auch andere Maße angeben.
Hinweis

Sie können auch Multimedia- und Audio-Dateien aufrufen, die sich auf Ihrem Webspace befinden. Allerdings müssen Sie dazu in das Feld Link-Adresse den Link zur Datei eingeben. Wenn z. B. die Datei musik.mp3 in der Dateiverwaltung im Ordner /downloads/mp3/ liegt, lautet der korrekte Link:

http://www.ihredomain.de/tl_files/downloads/mp3/musik.mp3 (Domainnamen gegen Ihren Domainnamen austauschen!)

Weitere Varianten finden Sie auf der Webseite der Mediabox:

http://iaian7.com/webcode/mediaboxAdvanced

Achtung

Diese Aufrufe funktionieren nicht, wenn Ihr Administrator im Seitenlayout statt der Mediabox die Slimbox eingebunden hat!

Den Link einbetten

Sie können den Link-Text hier mit %s in ein festgelegtes Satzkonstrukt einbetten.

Angenommen, der Link-Text lautet Sommeraktion. Sie schreiben dann z. B. in das Den Link einbetten-Eingabefeld: Klicken Sie hier, um sich unsere %s anzusehen.

Auf der Webseite steht dann: Klicken Sie hier, um sich unsere Sommeraktion anzusehen. Das Wort »Sommeraktion« ist dabei mit dem Link versehen.

Einen Bildlink erstellen

Sie können anstelle des Link-Textes auch einen Bildlink erstellen. Wenn Sie den Haken bei Einen Bildlink erstellen setzen, werden darunter die weiteren Bildfunktionen eingeblendet.

Quelldatei

Pflichtfeld, wenn der Haken bei Einen Bildlink erstellen 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 in 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.

Einen Bildlink erstellen
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 schliessen 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.

Bildunterschrift

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

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.