Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

TYPO3 Neos Grundkurs

Template für Node Type mit zusätzlichen Eigenschaften

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Nach Definition eigener Knotentypen lassen sich neue Knoten bereits per Neos-Backend einfügen und auch Inhalte hinterlegen. Für die Ausgabe nutzen Sie hier ein Template sowie TypoScript-Konfiguration als Bindeglied.

Transkript

Unser NodeType für einen Reisebericht basiert auf dem Standardtyp TYPO3 Neos Document und erweitert diesen um zusätzliche Eigenschaften. Wir haben hier ein Teaser-Bild, die Reiseart sowie Verknüpfungen zu Ländern. Allerdings fehlt noch die Anzeige im Front-End. Diese wollen wir nun ergänzen. Wechseln wir hierzu in den Editor. Als erstes wolle wir mit etwas TypoScript beginnen. Hierzu rufen wir unser "RootTypoScript" auf. Da wir in unserem TypoScript auf Page zugreifen wollen, müssen wir unser eigenes TypoScript unten hinzufügen. Wir ergänzen hier ein "Bericht.ts2", speichern ab und legen diese Datei an. Eine neue Datei namens "Bericht.ts2" und dort kann nun unser Typoscript ergänzt werden. Ausgehend von "root" fügen wir unseren "bericht" hinzu Ob es sich bei dem zu rendernden Inhalt tatsächlich um unseren Typ für die Reiseberichte handelt, entscheidet eine Condition. Die wollen wir an dieser Stelle ergänzen. Wir haben hier eine Abfrage auf "q(node)" und hier soll die Eigenschaft geprüft werden, ob es sich um eine Instanz, eine "instanceof", vom Typ "NeosTraining.Website" handelt, ":Bericht". Falls dies der Fall ist, soll der Render Path für "Berichte" angewendet werden. "bericht" selbst, hier auf oberer Ebene, erbt seine Eigenschaften als erstes von "page" Und wir wollen dann Anpassungen vornehmen. Es gibt einen Head-Bereich sowie einen Body-Bereich. Im Head-Bereich müssen wir noch für Metadata den "templatePath" setzen auf unseren Pfad zum "berichtTemplate". Außerdem haben wir hier auch für die Style Sheets einen solchen "templatePath" und für die "javascripts". Etwas äquivalentes gibt es auch im den Body-Bereich für die Javascript-Dateien dort und wir müssen dort auch noch einen "templatePath" von unserer Ressource "berichtTemplate" hinzufügen. Jetzt haben wir hier schon mehrfach auf das "berichtTemplate" zugegriffen dies wollen wir daher gleich als nächstes definieren. "berichtTemplate" ist eine Ressource. diese befindet sich in unserem Paket "NeosTraining.Website" im "Private"-Bereich unter "Templates", "Page" und heißt "Bericht.html". Die Besonderheit für unsere Reiseberichte sind selbstverständlich die Properties. Diese wollen wir hier unten im Body hinzufügen. Wir ergänzen "parts.typ" und haben hier eine Abfrage auf "q(documentNode)", das ist unser Dokument, und wir wollen dort auf das "property('typ')" zugreifen. Sehr ähnlich sind außerdem die anderen beiden Properties, einmal für das Land und einmal für das Teaser-Bild. Damit ist das TypoScript fertig und wir können uns unserem Template zuwenden. Wir kopieren als erstes unser Standard-Template fügen dies ein und geben ihm den Namen "Bericht". Bei diesem Template müssen wir nun unsere neuen Properties noch ausgeben. Im Header unseres Inhalts wollen wir als erstes unser Bild hinzufügen. Dieses stammt aus "TYPO3 Media", wir verwenden hier also den Namespace "media" und daraus den ViewHelper "image" Es handelt sich bei unserem Bild um ein "asset" entsprechend lautet auch der Parameter. In diesen haben wir aus TypoScript in "parts" "teaserBild" übergeben Wir definieren, dass unser Bild eine maximale Breite haben soll, von zum Beispiel 400 Pixeln und wir geben auch noch eine maximale Höhe mit. Einen Alt-Text wollen wir an dieser Stelle nicht angeben, dieses Attribut ist allerdings zwingend erforderlich. Außerdem verwenden wir noch ein paar CSS-Angaben, um entsprechend unser Bild nach rechts zu verschieben. Wir wollen dieses nach rechts fließen lassen, es soll eine maximale Größe von 100 Prozent haben, sodass es auf sehr kleinen Bildschirmen dann herunterskaliert wird und die Höhe soll automatisch vergeben werden. Schließen wir das Tag ab. Ich habe eben gesagt, dass wir aus TYPO3 Media den ImageViewHelper verwenden wollen Diesen Media-Namespace müssen wir allerdings als erstes noch in unserem Template deklarieren. Das geschieht hier oben über "namespace", wie wählen den Namen "media" und die in dem ViewHelper stammen aus "TYPO3\Media\ViewHelpers". Zurück zu unserem Header. Als nächstes wollen wir die Länder unserer Reise ausgeben. Wir ergänzen hier einen DIV-Bereich für die Länder und lassen diese ausgeben. Aus TypoScript werden diese in "parts.land" übergeben Allerdings können hier mehrere Länder zugeordnet werden, sodass wir eine Schleife benötigen. Eine "for each"-Schleife über unsere Variable gibt uns dann jedes einzelne Land als neue Variable zurück. Dies ist dann zum Beispiel unser "tempLand" Wir schließen die Schleife ab und in diesem Land können wir einen Link ergänzen. Diesen geben wir mit dem LinkViewHelper für einen Node aus dem Neos-Namespace aus. Wir müssen das Tag hier beenden und die Variable "tempLand" in unserem Fall hinzufügen. Nun würden natürlich mehrere Länder direkt hintereinander ausgegeben, weshalb wir noch eine Trennung mit Komma einfügen wollen. Wir ergänzen hierzu einen Iterator und zu diesem können wir eine Condition ergänzen. Falls unser Iterator mitteilt, dass dies das erste Element ist wollen wir kein Trennzeichen ausgeben ansonsten wollen wir ein Komma hinzufügen. Sie sehen, dass unser ViewHelper in geschweiften Klammern notiert ist. Es handelt sich hierbei um die Inline-Notation, unseres IfViewHelpers aus TYPO 3 Fluid. Kommen wir als letztes zur Ausgabe unseres Reisetypen. Wie ergänzen einen weiteren DIV, dieser soll den Typ ausgeben Hierzu steht uns die Variable "parts.typ" zur Verfügung. Dort gibt uns eine Zeichenkette den Typ an, welchen wir allerdings für die Ausgabe im Front-End noch übersetzen möchten. Hierzu verwenden wir den SwitchViewHelper. Unsere Expression ist hier über "parts.typ" mit "f:switch"" und wir müssen die einzelnen Fälle hinzufügen. Wir ergänzen hier ein "f:case", zum Beispiel für den Wert "rundreise", und die Ausgabe soll dann eben auch "Rundreise" bedeuten. Wir haben hier nur eine etwas andere Schreibweise. analog ergänzen wir noch die zwei weiteren Cases. Der eine Fall lautet "staedtetrip" und wir haben noch den "badeurlaub" als Auswahlmöglichkeit. Damit ist auch das Template fertiggestellt und wir können in unseren Browser wechseln. Wir laden einmal neu und betrachten unseren Inhalt. Hier hat sich offenbar noch ein kleiner Tippfehler bei den ViewHelpern eingeschlichen, welchen wir im Editor korrigieren. Hier oben fehlt bei unserem SwitchViewHelper noch ein Gleichheitszeichen. Zusätzlich ergänzen wir auch noch eine "clearfix"-Angabe in unserer CSS-Klasse für den Header, Damit hier die Ausgabe unseres Headers beendet wird, bevor der eigentliche Inhalt unseres Reiseberichts folgt. Laden wir die Seite neu im Back-End. Und Sie sehen hier, dass auf unserer Seite rechts das Bild angezeigt wird. Hier Verweise auf Länder inklusive Link sowie die Angabe zum Typ und unser Beschreibungstext. Wir haben in diesem Video TypoScript und Template für die Ausgabe unserer Reiseberichte im Front-End ergänzt.

TYPO3 Neos Grundkurs

Entdecken Sie die Konzepte und grundlegenden Technologien des modernen Content Management Systems und sehen Sie, wie Sie eigene Projekte starten.

Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!