Sulu: Junges CMS für den Mittelstand

Das junge CMS Sulu bietet sich als moderne Alternative zu etablierten Open-Source-Systemen wie Typo3 oder Drupal an und zeichnet sich unter anderem durch ein sehr flexibles, auf Blocks basierendes Content-Konzept aus.

Sulu wurde von der österreichischen Web-Agentur MASSIVE ART entwickelt und im Jahr 2014 als Open-Source-CMS veröffentlicht. Im Oktober 2019 ist Sulu in der Version 2.0.0 erschienen, bei der das Administrations-Interface vollständig auf React.js umgestellt wurde. Im Backend setzt Sulu weiterhin auf das beliebte Symfony-Framework und nutzt zur Datenspeicherung das Content-Repository PHPCR, das einen besonders flexiblen Umgang mit unstrukturierten Inhalten ermöglicht.

#Sulu für Content-Manager

Die modern gestaltete Autoren-Oberfläche von Sulu ist unterteilt in eine Haupt-Navigation auf der linken Seite, einem Content-Bereich in der Mitte und einer Live-Preview auf der rechten Seite. Zusätzlich gibt es noch Kontext-abhängige Bearbeitungs- und Funktions-Menüs in einer Dachzeile.

Herausstechend für Autoren ist das sehr flexible Content-Konzept von Sulu: Für Inhalte sind zwar durchaus auch starre Formulare möglich. Das besondere Merkmal von Sulu sind jedoch die flexiblen Content-Blocks, mit denen der Autor eine Seite sehr flexibel gestalten kann.

Ein Content-Block kann jede Art von Inhalt umfassen, zum Beispiel eine Überschrift, eine Sub-Headline, ein Zitat, einen Fließtext oder auch ein dynamisches Element wie der Teaser zu einer anderen Seite oder zu ganzen Artikel-Listen. Die einzelnen Blöcke sind zur besseren Übersicht eingeklappt und können per Klick aufgeklappt werden, um die Inhalte zu bearbeiten. Außerdem können die Blöcke per Drag & Drop verschoben werden, wobei sich die Seiten-Preview bei jeder Aktion in Echtzeit aktualisiert.

Über das System der Content-Blöcke lassen sich auch neue Bilder einfügen oder bestehende Bilder aus der Media-Library integrieren. Die Funktionen für das Bild-Management sind dabei recht umfangreich: Angefangen von Meta-Angaben über einfache Bild-Bearbeitungen wie Crop und Resize bis hin zur Definition von Focus Points.

Das Block-Konzept von Sulu ist äußerst flexibel und vielseitig. In der Handhabung erinnert es weniger an den Block-Editor von WordPress, sondern eher an den modularen Seiten-Aufbau von Redaxo bzw. an die Content-Komponenten von AEM. Gerade bei Business-Webseiten mit einem eher modularen dürften die Autoren mit den flexiblen Blocks eine hohe Freiheit bei der Gestaltung des Web-Auftritts gewinnen. Bei stark redaktionsgetriebenen Webseiten könnte die Kleinteiligkeit der Blöcke dem Redaktionsprozess eventuell im Wege stehen, in diesem Fall kann man jedoch auch mit einem festen WYSIWYG-Editor versuchen.

Wie viele andere Content Management Systeme unterscheidet Sulu zwischen eher statischen Seiten (Pages) und dynamischen Inhalten (Articles). Statische Seiten werden dabei im Haupt-Menü unter "Webspace" angelegt und in einer Baum-Struktur organisiert. Dynamische "Articles" für Blogs oder News-Bereiche können separat als Bundle installiert werden.

Ein neuer Webspace kann von einem Entwickler angelegt werden und entspricht einem eigenen Webseiten-Projekt. Innerhalb des Webspaces können Redakteure einzelne Landinpages oder auch Microsites mit eigenen Templates und URLs einrichten.

Im Gegensatz zu einem hierarchischen Webspace ähneln die Articles einer Content-Datenbank, bei der die Inhalte in Listen-Form dargestellt werden. Die Integration eines Article-Bereiches in einen Webseite ist dabei denkbar einfach: Man erstellt im Webspace eine statische Seite z.B. mit dem Titel "Blog" und integriert die Artikel-Liste dort mit dem Block "Smart Content". Mit diesem Block-Typ kann man Artikel-Listen integrieren und auch ausgewählte statische Seiten anteasern.

Sulu bietet noch viele andere Features, beispielsweise Snippets für wiederkehrende Elemente wie den Footer oder auch umfangreiche Funktionen für die Lokalisierung einer Webseite. Dabei gelingt es Sulu, die Komplexität und Flexibilität des Systems in eine ausgesprochen moderne und vergleichsweise intuitiv zu bedienende Nutzeroberfläche zu kleiden. Sofern die Autoren mit dem Block-Konzept zurecht kommen, dürfte Sulu eine sehr gute Alternative zu den etablierten Open Source CMS für den Mittelstand und auch für den Enterprise-Bereich sein. Testen kann man das System mit der Demo-Version unter sulu.rocks.

#Sulu für Entwickler

Sulu basiert auf dem beliebten PHP-Framework Symfony und arbeitet mit Doctrine und (seit Version 2) mit React.js. Als Server können Apache und Nginx verwendet werden, für die Datenspeicherung werden MySQL- und PostgreSQL-Datenbanken vollständig unterstützt. Relationale Datenbanken werden allerdings nur für einen kleineren Teil der Inhalte verwendet, da Sulu die meisten Inhalte in dem Content-Repository PHPCR abspeichert. Über das Content-Repository lassen sich deutlich einfacher unstrukturierte und hierarchisch sortierte Inhalte wie Content-Blöcke abbilden. Mit diesem Konzept folgt Sulu im PHP-Bereich einen ähnlichen Weg wie der Adobe Experience Manager (AEM) oder Magnolia im Java-Bereich. Beide Java-CMS nutzen für die Speicherung von Inhalten das Content-Repository CRX und ermöglichen damit einen ähnlich flexiblen Umgang mit Inhalten wie Sulu.

Anders als die meisten Content-Management-Systeme bietet Sulu keinen Installations-Wizzard an, sondern beschreibt in einer Anleitung die manuelle Installation über Composer und die Konsole. Nachdem das System und seine Dependencies heruntergeladen wurden (deutlich über 100 MB), müssen einige Konfigurations-Dateien angepasst und ein interner Server über die Konsole gestartet werden. Die Sulu-Webseite ist dann unter http://127.0.0.1:8000 erreichbar. An den normalen Anwender richtet sich Sulu mit diesem Szenario sicherlich nicht, sondern folgt den Trends und Bedürfnissen einer engeren Entwickler-Szene und den Möglichkeiten größerer Unternehmen.

Bei der Template-Entwicklung arbeitet man bei Sulu mit XML und Twig. Die XML-Datei gibt dabei die Seitenstruktur vor und definiert die Eingabemöglichkeiten über das Autoren-Interface. Mit Twig werden dann die Seiten gerendered, also die klassischen Templates erstellt.

Ein XML-Template beinhaltet Angaben wie den Key (Unique Identifier), die View (das Twig-Template), Properties mit Name, Typ, Titel und optional zahlreichen weiteren Eigenschaften. Außerdem werden über die XML-Templates die verschiebbaren Content-Blöcke definiert. Ein typisches Template kann so aussehen:

<!-- app/Resources/templates/pages/event.xml -->
<?xml version="1.0" ?>
<template xmlns="http://schemas.sulu.io/template/template"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">

    <key>event</key>

    <view>templates/event</view>
    <properties>
        <property name="startDate" type="date">
            <meta>
                <title lang="en">Start Date</title>
            </meta>
            <params>
                <param name="values" type="collection">
                    <param name="concert">
                        <meta>
                            <title lang="en">Concert</title>
                        </meta>
                    </param>
                 </param>
             </params>
        </property>
    </properties>

    <block name="eventDetails" default-type="text">
        <types>
            <type name="text">
                <meta>
                    <title lang="en">Text</title>
                </meta>
            </type>
     </block>

</template>

Die Twig-Templates folgen dem typischen Muster und können beispielsweise so aussehen:

<ul>
    {% for item in sulu_navigation_root_tree('main', 2) %}
    <li>
        <a href="{{ sulu_content_path(item.url) }}"
            title="{{ item.title }}">{{ item.title }}</a>
        {% if item.children|length > 0 %}
            <ul>
            {% for child in item.children %}
                <li><a href="{{ sulu_content_path(child.url) }}"
                        title="{{ child.title }}">
                    {{ child.title }}
                </a></li>
            {% endfor %}
            </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

Das Templating birgt also keine großen Überraschungen, auch wenn viele andere Systeme statt XML heute lieber YAML für die Definition von Formular-Feldern und Autoren-Interfaces verwenden. Wer tiefer in die Materie einsteigen will, kann dazu wie immer die Dokumentation von Sulu nutzen.

#Kosten

Sulu ist komplett Open Source und kostenfrei. Kosten fallen wie üblich für die Implementierung. Die Verbreitung von Sulu ist derzeit noch vergleichsweise gering, man wird jedoch neben Massive Art auch noch weitere Dienstleister finden.

#Wann macht Sulu Sinn?

Wie Sulu bereits in seiner Eigen-Darstellung beschreibt, ist das System für den Mittelstand und für die Industrie entwickelt worden. Schon die komplexe Installations-Routine und der Speicherverbrauch machen die Enterprise-Ausrichtung des Systems deutlich. Für einfachere Webseiten und kleinere Unternehmen kann Sulu sicherlich auch genutzt werden, allerdings gibt es für für dieses Markt-Segment sinnvollere Alternativen.

Konzeptionell passt Sulu vor allem zu flexiblen und modular gestalteten Webauftritten. Im Vorfeld sollten die Redakteure allerdings das Content-Konzept mit dem Block-System testen. Wenn die Autoren mit dem Konzept zurecht kommen und insgesamt die Größenordnung passt, dann kann Sulu als autorenfreundliche und moderne Alternative zu etablierten Systemen wie TYPO3 oder Drupal eingesetzt werden. Auch als PHP-Alternative zu dem High-End Java-System AEM von Adobe ist aufgrund des verwandten Konzepts denkbar. In IT-Abteilungen dürften vor allem der moderne Symfony-Stack und das React-Frontend auf Gegenliebe stoßen.