Content-Objekte
Bisher haben wir uns lediglich mit dem Content-Objekt “TEXT” befasst, doch neben Textelementen haben wir noch ein paar andere, die für die Gestaltung unserer TYPO3-Site nützlich und sinnvoll sind.
Bilder
Um im Frontend ein Bild auszugeben, kann im Typoscript der Objekttyp “IMAGE” verwendet werden:
page.20 = IMAGE
page.20{
file = fileadmin/Bilder/ts_eichhoernchen.jpg
params = style="width: 50%; height: auto;"
}
In unserem ersten “Image-Beispiel” finden sich zwei Attribute. Das Attribut “file” ist notwendig, damit der Pfad zur Bilddatei angegeben werden kann. Mit “params” haben wir eine Option, die uns, wie der Name schon sagt, erlaubt, Parameter zum Bild hinzuzufügen. Genauer gesagt handelt es sich um all jene Parameter, die wir auch in einem HTML <IMG> hinzufügen können. In Unserem Fall haben wir das Bild auf 50% der Bildschirmbreite skaliert. Sehen wir uns unseren bisherigen Code im Gesamten an:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!<br>
page.5 = TEXT
page.5 {
value = HALLO!
wrap = <h1>|</h1>
}
page.20 = IMAGE
page.20{
file = fileadmin/Bilder/ts_eichhoernchen.jpg
params = style="width: 50%; height: auto;"
}
Bitte beachten: Nach dem “Hello World!” wurde noch ein HTML-Zeilenumbruch hinzugefügt, damit das Bild unter und nicht neben dem Text platziert wird. Das Ergebnis sieht so aus:
Das Eichhörnchen stammt übrigens von stock.adobe.com und ist genau dort kostenlos als Download verfügbar.
CONTENT und COA
Als nächstes wollen wir uns anschauen, wie wir Inhaltselemente mit Typoscript auslesen. Legen Wir dazu auf der Startseite ein einfaches Textelement an, das ein wenig Text enthält:
Wenn. wir mit der Maus über das Feld im grünen Rahmen hovern, sehen wir, dass dieses Element die Uid mit der Nummer 1 hat (roter Rahmen). Diese Uid-Nummer brauchen wir, um den Inhalt aus dem Textelement auszulesen.
Wir werden uns den Code des Auslesens der Inhaltselemente in zwei Schritten anschauen: Im ersten Schritt wählen wir das auszugebende Element / die auszugebenden Elemente aus, im zweiten Schritt stellen wir das Ausgelesene im Frontend dar.
Folgenden Code benötigen wir zum Auslesen:
page.30 = CONTENT
page.30 {
table = tt_content
select.uidInList = 1
}
Durch das Content-Object “CONTENT” drücken wir aus, dass wir an dieser Stelle Elemente aus dem Backend (Text, Text und Bilder etc.) auslesen möchten. Die Variable “table” signalisiert, aus welcher Datenbank-Tabelle wir unsere Inhalte auslesen möchten. Regulär werden Inhalte im TYPO3 in der Tabelle “tt_content” gespeichert. Zu guter Letzt wollen wir im ersten Schritt noch unser Textelement auswählen, das wir zuvor erstellt haben. Dies geschieht grundlegend mit “select”, doch müssen wir auch noch ausdrücken, dass es sich um ein bestimmtes Element mit einer bestimmten Identifikationsnummer handelt. Wir erinnern uns: Unser Element hat die uid 1, daher der Befehl select.uidinList = 1.
Wir haben nun also ausgewählt, welche Elemente im Frontent ausgegeben werden sollen. Nun wollen wir im zweiten Schritt diese Ausgabe auch ausführen:
page.30.renderObj = COA
page.30.renderObj{
10 = TEXT
10.stdWrap.field = bodytext
}
Mit dem Attribut “renderObj” definieren wir, dass hier eine Ausgabe ins Frontend, also ein Render, stattfinden soll. Als Objekttyp wählen wir das sogenannte COA. COA steht für Content Object Array - wir haben es hier also mit einer Anordnung an Inhalten zu tun. Für uns bedeutet das, dass wir innerhalb dieses COA mehrere Inhalte definieren können.
Wir starten mit einem Textobjekt. In diesem möchten wir ausgeben, was wir in unserem Backend-Textelement im Feld “Text” hineingeschrieben haben. Durch das Attribut “field” wählen wir das Feld aus. Indem wir hier “bodytext” zuweisen, wird der Inhalt aus dem Feld “Text” gerendert. Sehen wir uns an, wie wir die anderen Felder auswählen können. Befüllen wir dazu in unserem Backend-Element ein paar weitere Felder:
Wie wir unten sehen, können wir drei weitere Felder aus unserem Textelement rendern, indem wir dem Attribut “field” die entsprechenden Werte zuweisen: Mit “header” rendern wir die Überschrift, mit “subheader” die Unterüberschrift und mit “header_link” das Feld, das für eine Verlinkung gedacht ist (aber nicht zwingendermaßen dafür genutzt werden muss):
page.30.renderObj = COA
page.30.renderObj{
5 = TEXT
5.field = header
7 = TEXT
7.field = subheader
10 = TEXT
10.field = bodytext
20 = TEXT
20.field = header_link
}
Unser Frontent schaut nun so aus:
Um das Ganze ein wenig ansehnlicher zu gestalten, nutzen wir das bereits bekannte Attribut “wrap”:
page.30.renderObj = COA
page.30.renderObj{
wrap = <div>|</div>
5 = TEXT
5.field = header
5.wrap = <h1>|</h1>
7 = TEXT
7.field = subheader
7.wrap = <h2>|</h2>
10 = TEXT
10.field = bodytext
20 = TEXT
20.field = header_link
}
Nun sieht die Frontend-Ausgabe ein wenig geordneter aus:
Kommen wir kurz nochmal zur Selektion, aslo zum ersten Schritt, zurück: Wir haben mit dem Attribut “select.uidInList” ein Element mit einer bestimmten ID ausgewählt, das im Frontent gerendert werden soll. Das Gleiche können wir mit der ID einer Seite machen und somit alle Elemente dieser Seite rendern. Im Bild unten sehen wir, dass wir mit dem Hovern über der Seite im Menü links die Seiten-ID herausfinden können. Zur Demonstration habe ich auf die Schnelle einfach das erste Element kopiert, damit wir zwei auf dieser Seite haben:
Wir müssen in unserer Selektion nur einen einzigen Buchstaben ändern: Anstatt “select.uidInList” verwenden wir nun “select.pidInList”:
page.30 = CONTENT
page.30 {
table = tt_content
select.pidInList = 1
}
Und siehe da: Beide Elemente aus dem Backend werden im Frontend gerendert!
FOLLOW
