TYPOlight wurde ab der Version 2.9 zu Contao umbenannt. Die komplett neu verfasste und umfangreichere Online-Version des neuen Contao-Handbuchs finden Sie unter www.contao-handbuch.de. Das alte TYPOlight-Handbuch bleibt für Nutzer älterer Versionen hier erhalten.
Bildergalerie
Mit diesem Element können Sie eine einfache Bildergalerie anzeigen. Alternativ steht Ihnen für diesen Zweck aber auch das Element „dfGallery“ zur Verfügung.
Wie bei den meisten Elementen, haben Sie auch hier vor dem eigentlichen Inhalt des Elements die Möglichkeit diesem Abschnitt eine Überschrift zuzuweisen:
Eingabefeld „Überschrift“ samt Ausklappfeld (h1 – h6)
Geben Sie in das Eingabefeld die gewünschte Überschrift ein und wählen Sie aus dem Ausklappfeld die Hierarchiestufe der Überschrift aus. Hierarchiestufe bedeutet, dass Sie festlegen können, welche „Wichtigkeit“ diese Überschrift in einem Beitrag hat. Ist es die Hauptüberschrift (h1) oder bereits eine hierarchisch tiefer liegende Überschrift (h2 – h6, wobei h6 die niedrigste Stufe darstellt) der Seite?
Quelldatei (Pflichtfeld)
Hier können Sie die Bilder aus der bestehenden Dateistruktur auswählen. Wenn sich die Bilder darin noch nicht befindet, können Sie alternativ auf die „Festplatten“-Funktionsgrafik neben dem Begriff „Quelldatei“ klicken und damit den Dateimanager in einem neuen Browserfenster öffnen. Mit Hilfe des Dateimanagers können Sie neue Bilder von Ihrem Computer in die Dateistruktur von TYPOlight hochladen. Alles weitere dazu finden Sie in der Beschreibung des Dateimanagers.
Wenn sich die Bilder in der Dateistruktur befinden, können Sie sie wie folgt auswählen:
Klicken Sie auf die „Plus“-Funktionsgrafik vor dem Ordnernamen, damit dieser sich öffnet und die darin liegenden Ordner bzw. Dateien anzeigt.
Es kann durchaus sein, dass Sie nur einen oder zwei Ordner sehen. Die Anzahl der Ihnen zur Verfügung stehenden Ordner, sowie Ihre Möglichkeiten zur Interaktion mit den Ordnern / Dateien werden von Ihrem Administrator festgelegt.
Wählen Sie die gewünschten Bilder aus, indem Sie mit der Maus jeweils in das kleine eckige Feld rechts neben dem Bild klicken.
Sie können auch den gesamten Inhalt eines Ordners auf einmal auswählen, indem Sie in das eckige Feld rechts neben einem Ordner klicken.
Vorschaubilder pro Reihe
Wählen Sie aus dem Ausklappfenster aus, wie viele Bilder in einer Reihe angezeigt werden sollen. Beachten Sie dabei jedoch, dass es keinen Sinn macht eine zu hohe Zahl auszuwählen, wenn die Gesamtbreite aller Bilder nebeneinander breiter wird als der verfügbare Platz!
Sortieren nach
Wählen Sie aus dem Ausklappfenster, in welcher Reihenfolge die Bilder angezeigt werden sollen:
- Aufsteigend nach dem Dateinamen sortiert
- Absteigend nach dem Dateinamen sortiert
- Aufsteigend nach dem Datum (des Hochladens) sortiert
- Absteigend nach dem Datum (des Hochladens) sortiert
- Entsprechend der Meta Datei (meta.txt) sortiert
Im Gegensatz zum einfachen Bild-Element können Sie in der Bildergalerie nicht so einfach die Bildbeschreibung oder die Alternativtexte festlegen. Wenn Sie zur Sortierung eine Sortierung nach dem Dateinamen oder dem Datum wählen, kreiert TYPOlight daher die Bildbeschreibung automatisch aus dem Dateinamen. Achten Sie deshalb darauf, dass Sie die Dateinamen logisch vergeben (Wortabstände füllen Sie mit dem Unterstrich: _ ).
Schlecht: Aus DSC00001.jpg macht TYPOlight die Beschreibung „DSC00001“ Gut: Aus Brandenburger_Tor.jpg macht TYPOlight die Beschreibung „Brandenburger Tor“
Meta Datei
Alternativ haben Sie die Möglichkeit, eine Meta Datei anzulegen. Erstellen Sie dazu eine Datei namens meta.txt und laden Sie diese in den Ordner, in dem sich die Bilder befinden.
Innerhalb der Datei können Sie je Zeile für ein Bild die folgenden Angaben hinterlegen:
- Dateiname
- Alternativtext
- Link
- Bildunterschrift
Eine entsprechende Zeile in der Meta Datei muss wie folgt aussehen: dateiname.jpg = Alternativtext mit ein paar Wörtern | http://www.domain.de | Bildunterschrift mit ein paar Wörtern
Entsprechend dem oben genannten Beispiel könnten Sie das also so einsetzen, wenn Sie die Dateinamen nicht ändern wollen: DSC00001.jpg = Brandenburger Tor | http://www.berlin.de | Brandenburger Tor in Berlin
Achten Sie darauf, dass Sie pro Zeile nur die Daten für ein Bild hinterlegen können. TYPOlight reagiert auf die Angaben in der meta.txt nur dann, wenn Sie bei „Sortieren nach“ die Auswahl „Meta Datei (meta.txt)“ auswählen. Die Reihenfolge der Bilder richtet sich dann nach der Reihenfolge mit der sie in der Meta Datei aufgeschrieben wurden.
Sie können nur die Bilder aus einem Ordner anzeigen. Die Meta Datei muss immer im gleichen Ordner liegen wie die ausgewählten Bilder.
Elemente pro Seite
Wenn Sie alle Bilder der Bildergalerie auf einer Seite anzeigen wollen, schreiben Sie in das Eingabefeld 0. Wenn Sie stattdessen eine andere Zahl wie z.B. 10 hinschreiben, werden nur die ersten 10 Bilder in der Galerie auf der Seite angezeigt. Zusätzlich wird nun aber eine Galerie-Navigation eingeblendet, mit der die Besucher zwischen den einzelnen Seiten der Galerie hin und her navigieren können.
Wenn Sie die Anzahl der Elemente pro Seite festlegen, müssen Sie darauf achten, dass diese möglichst zur Anzahl der „Vorschaubilder pro Reihe“ passt, damit keine leeren Felder angezeigt werden.
Benutzerverzeichnis verwenden
Mit einem Klick in diese Checkbox können Sie festlegen, dass registrierte Besucher die sich bei der Website anmelden, auf der Seite in der Bildergalerie die Bilder aus ihrem eigenen Benutzerverzeichnis sehen.
Diese Funktion steht Ihnen vermutlich nicht zur Verfügung, da spezielle Voraussetzungen erfüllt sein müssen, damit sie funktioniert. Fragen Sie im Zweifelsfall Ihren Administrator falls Sie sie nutzen möchten.
Bildabstand
Hier können Sie festlegen welchen Abstand die Bilder zu den benachbarten Elementen haben sollen. Die Eingabefelder sind in der Reihenfolge „Abstand oben“, „Abstand rechts“, „Abstand unten“ und „Abstand links“ mit Zahlen- oder Prozentwerten (je nach Wahl der Maßeinheit) anzugeben. Wählen Sie außerdem aus dem Ausklappfeld die gewünschte Maßeinheit.
Eine mögliche Angabe wäre daher z.B.:
Damit hätten Sie festgelegt, dass rund um die Bilder jeweils 10 Pixel Abstand zu den anderen Elementen bestehen sollen.
Wenn Ihr Webdesigner besonderen Wert auf Standardkonformität (und somit saubere Trennung von Inhalt und Layout) legt, wird er Ihnen möglicherweise die Angabe des Bildabstandes nicht gestatten, sondern die Abstände selbst mittels einem externen Stylesheet festlegen (das Festlegen des Bildabstandes mit TYPOlight bewirkt so genannte „Inline Styles“).
Bildbreite und Bildhöhe
In diese Felder können Sie Werte eintragen um die Größe der Bilder (Pixel) durch TYPOlight automatisch anpassen zu lassen. Wenn Sie keinen Wert eintragen, werden die Bilder in der Originalgröße angezeigt.
Wenn Sie nur in das erste Feld (Bildbreite) oder nur in das zweite Feld (Bildhöhe) einen Wert eingeben, berechnet TYPOlight den zweiten Wert automatisch anhand der Form der Bilder. So können Sie vermeiden, dass Bilder gestaucht wirken.
Wenn Sie wollen, dass die Bilder auf der Website zuerst als verkleinerte Ansicht angezeigt werden (ein so genanntes „Thumbnail“) und erst ein Klick darauf, die große Ansicht anzeigt, können Sie an dieser Stelle die verkleinerten Maße einstellen und weiter unten dann den Haken bei „Großansicht“ setzen.
Großansicht
Klicken Sie hier, um die Bild mit einer „Thumbnail“-Funktion zu versehen. Das bedeutet, dass der Besucher auf die Bilder klicken kann und sich dann die Bilder in der Originalgröße öffnen. Dies macht natürlich nur Sinn, wenn Sie zuvor oben bei der Bildgröße verkleinerte Werte angegeben haben.
Nur Gästen anzeigen
Setzen Sie hier einen Haken wenn Sie wollen, dass dieses Element nur für Besucher sichtbar ist, die nicht als Benutzer Ihrer Website angemeldet sind.
Element schützen
Setzen Sie hier einen Haken wenn Sie wollen, dass dieses Element nur für bestimmte angemeldete Benutzergruppen sichtbar ist. Nachdem Sie den Haken gesetzt haben, werden Ihnen alle momentan existierenden Benutzergruppen angezeigt. Wählen Sie diese aus, indem Sie vor den Namen der Benutzergruppe(n) einen Haken setzen.
Ausrichtung des Inhaltselements
Hiermit können Sie die Ausrichtung (linksbündig, rechtsbündig, zentriert, Blocksatz) des Elements festlegen. Wenn Ihr Webdesigner Wert auf eine saubere Trennung von Inhalt und Layout legt, wird er Ihnen diese Funktion üblicherweise nicht zur Verfügung stellen. Stattdessen kann er Ihnen z.B. eine Stylesheet ID- oder Klassenbezeichnung geben und die Ausrichtung mittels CSS festlegen.
Abstand davor und dahinter
Hiermit können Sie festlegen wie viele Pixel Abstand vor / nach dem Element (in Relation zu anderen Elementen) existieren. Wenn Ihr Webdesigner Wert auf eine saubere Trennung von Inhalt und Layout legt, wird er Ihnen diese Funktion üblicherweise nicht zur Verfügung stellen. Stattdessen kann er Ihnen z.B. eine Stylesheet ID- oder Klassenbezeichnung geben und die Abstände mittels CSS festlegen.
Stylesheet ID und Klasse
Geben Sie in das erste Feld eine ID-Bezeichnung und / oder in das zweite Feld eine oder mehrere Klassenbezeichnungen ein, wenn Ihr Webdesigner Ihnen solche Anweisungen zur Verfügung stellt und diese für das aktuelle Element erwünscht werden.
Speichern Sie das Element, nachdem Sie alle gewünschten Felder ausgefüllt haben.