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.
Bild
Mit diesem Element können Sie ein einzelnes Bild anzeigen lassen. Falls Sie einen Textabschnitt haben und dazu ein passendes Bild veröffentlichen wollen, können Sie alternativ auch das Text-Element nutzen. Mehrere Bilder veröffentlichen Sie am besten mit dem Element Bildergalerie oder dfGallery (siehe Elementbeschreibungen).
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 das Bild aus der bestehenden Dateistruktur auswählen. Wenn sich das Bild 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 ein neues Bild von Ihrem Computer in die Dateistruktur von TYPOlight hochladen. Alles weitere dazu finden Sie in der Beschreibung des Dateimanagers.
Wenn sich das Bild in der Dateistruktur befindet, können Sie es 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 das gewünschte Bild aus, indem Sie mit der Maus in das kleine runde Feld rechts neben dem Bild klicken.
Alternativer Text (Pflichtfeld)
Geben Sie hier eine kurze Beschreibung des Bildes ein. Dies hilft z.B. blinden Besuchern, da diese zwar das Bild nicht sehen, die Beschreibung aber lesen können.
Bildabstand
Hier können Sie festlegen welchen Abstand das Bild zu den benachbarten Elementen haben soll. 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 das Bild jeweils 10 Pixel Abstand zu den anderen Elementen bestehen soll.
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 des Bildes (Pixel) durch TYPOlight automatisch anpassen zu lassen. Wenn Sie keinen Wert eintragen, wird das Bild 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 des Bildes. So können Sie vermeiden, dass Bilder gestaucht wirken.
Wenn Sie wollen, dass das Bild auf der Website zuerst als verkleinerte Ansicht angezeigt wird (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.
Bild verlinken
Sie können das Bild auch mit einem Link zu einer Website versehen bzw. eine Seite von der eigenen Website auswählen.
Geben Sie die Internetadresse ein, die Sie verlinken wollen. Achten Sie darauf, dass diese mit http:// beginnen muss! Das könnte dann z.B. so aussehen: http://www.spiegel.de
Wenn Javascript in Ihrem Browser aktiv ist, können Sie neben dem Eingabefeld auf die Weltkugel-Grafik klicken. Dadurch öffnet sich ein kleines Browserfenster in dem Ihnen alle Seiten der aktuellen Website angezeigt werden. Wählen Sie aus der Liste die Seite aus, auf die Sie innerhalb der eigenen Website verlinken wollen.
Wenn Sie hier einen Link eingeben oder auswählen, haben Sie nicht mehr die Möglichkeit die Funktion „Großansicht“ zu nutzen!
Bildunterschrift
Hier können Sie einen Text angeben, der als Bildunterschrift auf der Website angezeigt wird.
Großansicht
Klicken Sie hier, um das Bild mit einer „Thumbnail“-Funktion zu versehen. Das bedeutet, dass der Besucher auf das Bild klicken kann und sich dann das Bild in der Originalgröße öffnet. 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.