Seminar Sulu CMS Templates und Frontend mit Twig

Sulu-Seitenvorlagen bestimmen zugleich die redaktionelle Eingabestruktur und die technische Frontendausgabe. Dieses Seminar zeigt, wie Inhaltsmodelle so entworfen werden, dass sie verständlich, wiederverwendbar, suchbar und über Redesigns hinweg stabil bleiben.

Die Teilnehmer entwickeln mehrere XML-Templates, setzen sie mit Twig um und integrieren Navigation, Medien, Metadaten, Auszüge und Smart Content. Ein besonderer Schwerpunkt liegt auf semantischen Blocks, defensiver Ausgabe und einer sauberen Trennung von Inhalt und Darstellungsoptionen.

Zielgruppe

Frontend-Entwickler, PHP- und Symfony-Entwickler, Template-Entwickler und technische Content-Architekten.

Voraussetzungen

Sichere Kenntnisse in HTML, CSS, Twig und grundlegender PHP- beziehungsweise Symfony-Entwicklung. Sulu-Grundkenntnisse werden vorausgesetzt.

Seminarziele

• XML-Seitenvorlagen korrekt und wartbar definieren.
• Property Types, Blocks, Parameter, Validierung und Suchrollen gezielt einsetzen.
• Inhalte, View-Daten und Erweiterungsdaten in Twig sicher verarbeiten.
• Navigation, Medien, Bildformate, Metadaten und Smart Content ausgeben.
• Templates für Vorschau, Mehrsprachigkeit, Tests und Weiterentwicklung vorbereiten.

Themenschwerpunkte

Template-Aufbau und Modellierung

• Schlüssel, Metadaten, View, Controller und Dateikonventionen.
• Properties, Pflichtfelder, Lokalisierung und redaktionelle Beschriftung.
• Semantische Inhaltsmodelle statt rein visueller Feldbezeichnungen.
• Vorlagen für Seiten, Startseiten und besondere Inhaltstypen.

Property Types und Blocks

• Text, Auswahl, Datum, Link, Medien, Kategorien, Tags und Beziehungen.
• Blocks mit mehreren Typen, verschachtelte Strukturen und wiederverwendbare Muster.
• Parameter, Darstellungsoptionen, Standardwerte und Validierung.
• Such-Tags, Feldrollen und Indexierungssteuerung.

Twig-Rendering

• Content-, View-, Extension- und Request-Daten.
• Template-Vererbung, Komponenten, Makros und defensive Ausgabe.
• Mehrere Ausgabeformate und projektspezifische Controller.
• Fehlende Werte, unbekannte Blocktypen und rückwärtskompatible Änderungen.

Navigation, Medien und Metadaten

• Navigation Contexts und hierarchische Menüs.
• Medienauswahl, Bildformate, Ausschnitte und responsive Ausgabe.
• Metadaten, Auszüge, Lokalisierungen und Segmente im Template.
• Interne Routen und korrekte Linkerzeugung.

Smart Content und dynamische Bereiche

• Properties, Provider, Filter, Sortierung und Darstellungsvarianten.
• Pagination, mehrere Listen und Zugriff auf Auszugsdaten.
• Leistungsfähige Ausgabe ohne unnötige Datenabfragen.

Vorschau, Qualität und Tests

• Redaktionelle Vorschau und bearbeitbare Bereiche.
• Schema- und Konfigurationsprüfung.
• Twig- und Integrationstests, Testinhalte und visuelle Abnahme.
• Änderungsstrategien für bestehende Inhalte.

Praxisanteil

Die Teilnehmer erstellen eine Startseiten- und Inhaltsvorlage mit mehreren Blocktypen, Medien, Taxonomien und Suchrollen, rendern beide mit Twig und ergänzen Navigation, Metadaten, Smart Content sowie Tests.