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

TYPO3 Neos Grundkurs

Eigenen Inhaltstyp definieren

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mittels Knotentypen können Erweiterungen für Standardtypen wie z.B. Seiten definiert werden, doch es ist auch möglich, ganz neue Inhaltstypen zu definieren.

Transkript

Auf der Seite "Berichte" wollen wir noch eine Liste unserer Reiseberichte hinzufügen. Diese soll jeweils das Teaser-Bild und einen Titel mit Verlinkung zum Bericht enthalten. Die einfachste Möglichkeit, um dies in den bereits vorhandenen Hauptbereich unserer Seite einzufügen, ist die Verwendung eines eigenen Inhaltstyps. Diesen definieren wir als erstes in den NodeTypes. Öffnen wir unsere YAML-Datei und begeben uns ganz nach unten. Hier fügen wir hinzu "NeosTraining.Website:" und dann den Typ "Berichtsliste". Dieser neue Typ soll abgeleitet sein vom Sypertype "TYPO3.Neos:" und dort von einem Inhaltselement, also vom Typ "Content". Für unser Back-End für das User Interface definieren wir noch einen Label, unser neuer Inhaltstyp soll "Berichtsliste" heißen. Und aufgelistet sein, soll unser neuer Inhaltstyp unter dem Bereich "general". Falls Sie noch weitere Eingabemöglichkeiten oder Eigenschaften hinzufügen wollen, könnten Sie hier dann noch "properties" ergänzen. Für einen einfachen Inhaltstyp ist dies allerdings schon vollkommen ausreichend. Als nächstes müssen wir das TyposScript hinzufügen. Dies ergänzen wir direkt in unserer "Root.ts2"-Datei. Wir könnten es zwar auslagern, aber wir brauchen nur ein paar Zeilen Wir definieren für unseren neuen Inhalt einen Prototypen, dieser heißt "NeosTraining.Website", und zwar "Berichtsliste". Abgeleitet ist dies vom Standard-Prototype "TYPO3.Neos:Content" und wir haben hier noch ein paar Eigenschaften zu setzen. Zu allererst wäre da natürlich das Template für unseren neuen Inhalt zu sehen. Wir setzen den "templatePath" auf eine "resource", und zwar befindet sich diese unterhalb von "NeosTraining.Website" dort unter dem Bereich "Private" "Templates" "TypoScriptObjects" und die Datei heißt "Berichtsliste.html". Außerdem müssen wir selbstverständlich unsere Berichte an das Fluid übergeben. Die Berichte laden wir einfach mittels FlowQuery ausgehend von unserer Site anhand des Typs. Wir suchen einfach für alle Elemente auf unserer Site per "q(site)" nach dem Typ "NeosTraining.Website:Bericht". Alle Elemente, die von diesem FlowQuery-Ausdruck gefunden werden, wenn-dann wird die Variable "berichte" an unser Fluid übergeben. Als letztes benötigen wir noch das Template. Erzeugen Sie hier eine neue Datei, die wir "Berichtsliste.html" nennen wollen. In dieser Datei benötigen wir als erstes zwei obligatorische Namespaces. Zum einen den Neos-Namespace für unsere Standard-ViewHelper, zum anderen wollen wir ein Bild ausgeben, welches aus "TYPO3\Media" einen ViewHelper verwenden soll. für unsere HTML fügen wir einen DIV-Container hinzu. Diesem geben wir zum Beispiel die Klasse "berichtsliste" und außerdem noch die Bootstrap-Klasse "container". In diesem Container benötigen wir eine Schleife über alle Berichte. Hierfür verwenden wir den FluidViewHelper "for" unsere Variable hierzu lautet "berichte" und innerhalb der Schleife wollen wir dann die Variable "bericht" verwenden. Für jeden einzelnen Bericht geben wir in HTML eine Zeile aus. Dies ist gemäß Bootstrap ein "div" ebenfalls mit der Klasse "row". Die zeile soll aus zwei Spalten bestehen. Also noch ein paar DIVs. Die Klasse für die Größenaufteilung ist gemäß Bootstrap "col-xs-6"" und nun folgen die Inhalte. In der ersten Spalte wollen wir ein Bild hinzufügen. aus dem Paket "TYPO3 Media", aus dem "media"-Namespace in unserem Fall, verwenden wir dazu den ImageViewHelper. Das Asset, was wir anzeigen wollen, finden wir über "bericht", dort müssen wir in die "properties" hineinschauen und unsere Variable heißt "teaserBild". Der ViewHelper möchte auf jeden Fall immer einen Alt-Tag haben, welches wir einfach mal auf einen Leerstring setzen. Außerdem soll unser Bild eine maximale Breite und Höhe haben. Nehmen wir für beide einfach mal 400 Pixel an. Wir fügen noch ein klein bisschen CSS hinzu, damit wir auch auf einem kleinen Bildschirm immer eine passende Größe haben. Unser Bild soll nie größer sein als unsere Zelle, das heißt wir definieren hier eine "max-width" von 100 Prozent und die Höhe soll automatisch sein. Anschließend muss dieser ViewHelper noch geschlossen werden. Weiter geht's mit einem Link zu unserem Reisebericht, der auch den Titel enthält. Hierfür verwenden wir den LinkViewHelper. Dieser stammt aus dem Neos-Namespace und wir wollen mit "link.node" auf einen Node verlinken, und zwar auf den Node, den wir über "bericht" angeben können. Auch diesen ViewHelper müssen wir schließen. Damit wäre unser Template fertig. nun müssen wir den Inhalt noch im Back-End hinzufügen. In der Hauptspalte ergänzen wir hier einen Inhalt. und zwar von unserem neuen Typ "Berichtsliste". Wechseln wir hier in die Vollbildansicht. Sie sehen nun eine Liste unserer Reiseberichte, bestehend aus einem Bild und dann der Verlinkung zum eigentlichen Node. Sie haben gesehen, wie einfach es möglich ist, einen eigenen Inhaltstyp zu definieren, per FlowQuery mal eben die entsprechenden Daten zu laden und mittels eines Templates die Anzeige zu erzeugen.

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!