SmartBoxen und SmartElements in inCMS: kleine Erweiterungen mit großem Nutzen

inCMS ist für viele Websites deshalb interessant, weil es im Alltag recht schlank bleibt: Inhalte lassen sich pflegen, Seiten können aufgebaut werden, ohne dass man sich ständig um Updates, Plugins oder technische Wartung kümmern muss. Trotzdem gibt es immer wieder Situationen, in denen man sich für eine Seite eine kleine Zusatzfunktion wünscht, die im Standard so nicht vorgesehen ist.

Genau an dieser Stelle werden SmartBoxen und SmartElements interessant. Sie sind keine vollwertigen Zusatzmodule im klassischen Sinn, aber sie erlauben es, wiederverwendbare Gestaltungselemente, Container, kleine Funktionen und spezielle Darstellungen mit HTML, CSS, JavaScript und konfigurierbaren Eingabefeldern zu erstellen.

Dieser Beitrag ist keine offizielle Dokumentation, sondern eine praktische Zusammenfassung aus einer konkreten Arbeit: Gesucht war eine Möglichkeit, Bilder auf einer inCMS-Seite nicht als klassische Galerie, sondern in einer freieren, zweispaltigen, masonry-artigen Darstellung zu zeigen. Während dieser Arbeit wurde recht deutlich, was mit SmartBoxen und SmartElements möglich ist – und wo ihre Grenzen liegen.

Was sind SmartBoxen?

SmartBoxen sind im Kern gestaltbare Container. Früher wurden sie in inCMS offenbar als Wrapper bezeichnet. Sie können bestehende Inhalte umschließen und ihnen ein bestimmtes Aussehen geben: Hintergrundfarbe, Innenabstände, volle Breite, Hintergrundbilder, Parallax-Effekte, Rahmen, Rundungen oder andere Layout-Eigenschaften.

Typischer Einsatz: Man hat einen normalen Inhaltsbereich und möchte daraus einen farbigen Abschnitt machen, vielleicht über die volle Browserbreite. Oder man möchte einen Textblock, ein Formular oder eine FlexiBox optisch anders behandeln, ohne jedes Mal manuell CSS zu schreiben.

Eine SmartBox besteht im Prinzip aus drei Bereichen:

HTML definiert die Grundstruktur, also zum Beispiel einen Container mit einer bestimmten Klasse.

CSS legt fest, wie dieser Container aussieht.

Editor-JSON definiert, welche Einstellungen im inCMS-Editor bearbeitbar sein sollen: Farben, Abstände, Checkboxen, Auswahlfelder, Bilder, Links und ähnliche Werte.

Der große Vorteil: Ein Entwickler oder fortgeschrittener Anwender kann einmal eine SmartBox vorbereiten. Danach kann ein Redakteur im Editor nur noch Werte ändern, zum Beispiel Farbe, Abstand oder Hintergrundbild.

Was sind SmartElements?

SmartElements sind näher an einzelnen Inhaltsbausteinen. Während SmartBoxen häufig vorhandene Inhalte umschließen, erzeugen SmartElements selbst einen bestimmten Inhalt oder eine bestimmte Darstellung. Beispiele wären ein Video-Element, eine kleine Werbebox, ein Kontaktbutton, ein Bild-Teaser oder eben eine individuell aufgebaute Bilderdarstellung.

Auch SmartElements bestehen aus HTML, CSS, JavaScript und einer Editor-Definition. Über diese Editor-Definition können Eingabefelder bereitgestellt werden. In den Beispielen, die ich mir angesehen habe, waren unter anderem solche Felder möglich:

Textfeld, mehrzeiliges Textfeld, Zahlenfeld, Farbfeld, Auswahlfeld, Checkbox, Datei-Auswahl, Bild-Datei-Auswahl und Linkfeld.

Damit lassen sich viele kleine Erweiterungen bauen, ohne dass man in den Kern von inCMS eingreifen muss.

Ein praktisches Beispiel: Bilder anders darstellen

Ausgangspunkt war eine fotografische Website. Die Bilder sollten nicht in einer klassischen Galerie mit starren Kacheln erscheinen, sondern in einer ruhigeren, zweispaltigen Darstellung: Desktop zwei Spalten, Smartphone eine Spalte, frei definierbarer Abstand, Original-Seitenverhältnis der Bilder.

Der erste Gedanke war naheliegend: Man nimmt die normale inCMS-Galerie, legt eine SmartBox darum und überschreibt das Galerie-Layout per CSS. Das klang einfach, funktionierte aber nicht zuverlässig. Die inCMS-Galerie erzeugt ihre eigene Struktur mit Rasterklassen. Diese Standardregeln blieben an mehreren Stellen stärker als die SmartBox-Regeln. Das Ergebnis: Die Bilder behielten teilweise das alte Galerieraster, Abstände wurden ignoriert oder das Layout reagierte je nach Browser unterschiedlich.

Die zweite Überlegung war: Kann ein SmartElement direkt einen Bilderordner auswählen und alle Bilder daraus ausgeben?

Nach Sichtung der verfügbaren Beispiele ergab sich kein belastbarer Hinweis darauf, dass ein normales SmartElement einen Ordner im inCMS-Dateibrowser auswählen und dann automatisch über alle darin enthaltenen Bilder iterieren kann. Es gibt Felder für einzelne Dateien und einzelne Bilder, aber keine erkennbare Schleife über einen Ordner.

Das ist ein wichtiger Punkt: SmartElements können sehr flexibel sein, aber sie sind keine vollwertigen serverseitigen Module. Wenn eine Funktion Daten aus dem System auslesen, Dateien eines Ordners automatisch laden oder Inhalte aus einer Datenbank abfragen soll, reicht ein normales SmartElement wahrscheinlich nicht aus. Dafür bräuchte es ein echtes Modul oder eine systemseitige Funktion.

Die funktionierende Lösung: Bilder einzeln auswählen

Am Ende war die praktikable Lösung deutlich einfacher: Die Bilder werden im SmartElement einzeln ausgewählt. Das Element bekommt zum Beispiel 20 Bildfelder. Jedes Bildfeld kann im Editor befüllt werden. Daraus baut das SmartElement eine eigene Darstellung.

Der Vorteil: Man ist nicht mehr abhängig vom Standard-Galeriemodul. Es gibt kein störendes Galerieraster mehr, keine Kollision mit bestehenden Galerieklassen und keine unerwünschten Zuschnitte.

Der Nachteil: Die Bilder müssen einzeln gepflegt werden. Für eine kuratierte Startseite, eine kleine Portfolioauswahl oder einen besonderen Bildabschnitt ist das völlig in Ordnung. Für große Archive oder dynamische Galerien ist es nicht der richtige Weg.

In der Praxis ist diese Unterscheidung entscheidend: Soll eine Bildauswahl bewusst gestaltet werden, ist ein SmartElement mit Einzelauswahl oft sogar besser. Soll ein ganzer Ordner automatisch ausgegeben werden, braucht man wahrscheinlich das normale Galerie-Modul oder eine eigene Modul-Erweiterung.

Was mit SmartBoxen und SmartElements gut geht

SmartBoxen und SmartElements eignen sich sehr gut für ergänzende Gestaltungs- und Funktionsbausteine. Dazu gehören zum Beispiel:

farbige Inhaltsbereiche, Full-Width-Abschnitte, Hintergrundbilder, flexible Abstände, Rahmen, Rundungen, kleine Teaserboxen, Video-Elemente, Call-to-Action-Bereiche, Kontaktbuttons, einfache Bilderraster, manuell gepflegte Portfoliobereiche oder spezielle Text-/Bildkombinationen.

Auch für wiederkehrende Gestaltungsaufgaben sind sie sinnvoll. Statt denselben HTML-/CSS-Code auf mehreren Seiten manuell zu pflegen, kann man ein SmartElement anlegen und im Editor nur noch die Inhalte austauschen.

Besonders praktisch ist, dass man Redakteuren nur die Felder gibt, die sie wirklich brauchen. Wer nur einen Abstand, eine Farbe und ein Bild ändern soll, bekommt genau diese Optionen – nicht mehr. Das reduziert Fehler und macht die Pflege einfacher.

Was eher nicht geht

Wichtig ist aber auch die Grenze. Nach meinem aktuellen Verständnis sind SmartBoxen und SmartElements keine vollwertigen Ersatzmodule für komplexe Systemfunktionen.

Schwierig oder nicht ohne Weiteres möglich sind zum Beispiel:

automatisches Auslesen eines Bilderordners, Schleifen über Dateien im Dateibrowser, dynamische Datenbankabfragen, komplexe Filterfunktionen, automatische Kategorielogik, serverseitige Verarbeitung oder echte Import-/Exportfunktionen.

Solche Aufgaben gehören eher in ein echtes inCMS-Modul oder in eine vorhandene Systemfunktion. SmartElements können die Darstellung und Bedienung erweitern, aber sie ersetzen nicht die Logik im Hintergrund.

Worauf man bei der Entwicklung achten sollte

SmartBoxen und SmartElements sind technisch nicht kompliziert, aber sie verlangen sauberes Arbeiten. Kleine Fehler in der JSON-Struktur reichen aus, damit ein Element nicht mehr gespeichert oder im Editor nicht korrekt angezeigt wird. Kommas, Klammern und Anführungszeichen müssen stimmen.

Außerdem sollte man genau unterscheiden, wo ein Wert ausgegeben wird. Manche Werte werden als CSS-Eigenschaft ausgegeben. Andere werden als HTML-Platzhalter ersetzt. Besonders wichtig ist dabei die Einstellung html: true. Sie sorgt dafür, dass der Wert nicht als CSS ausgegeben wird, sondern im HTML an einer passenden Stelle ersetzt wird.

Auch Zahlenfelder sollte man sauber behandeln. Wenn ein Feld automatisch px ergänzt, darf man im CSS nicht noch einmal mit * 1px rechnen. Genau solche Kleinigkeiten führen sonst dazu, dass Abstände scheinbar „ignoriert“ werden.

Ein weiterer Punkt ist die Browser-Kompatibilität. Manche Layout-Tricks funktionieren in Chrome und Safari gut, machen aber in Firefox Probleme. Bei einer masonry-artigen Bilddarstellung zeigte sich zum Beispiel, dass eine reine CSS-Spaltenlösung nicht überall gleich zuverlässig war. Eine JavaScript-gestützte Verteilung auf zwei Spalten kann stabiler sein, ist aber wiederum etwas aufwendiger.

SmartBox oder SmartElement?

Eine einfache Faustregel hilft:

• Wenn vorhandene Inhalte nur anders verpackt oder gestaltet werden sollen, ist eine SmartBox naheliegend.
• Wenn ein eigener kleiner Inhaltsbaustein entstehen soll, ist ein SmartElement passender.

Beispiel SmartBox: Ein Formular soll in einem farbigen Kasten mit Abstand, Rahmen und Hintergrundbild erscheinen.

Beispiel SmartElement: Ein spezieller Bild-Teaser mit Bild, Überschrift, Text und Button soll an mehreren Stellen identisch aufgebaut werden.

Bei der Bilderdarstellung war zunächst eine SmartBox naheliegend, weil die vorhandene Galerie nur anders aussehen sollte. Praktisch wurde aber ein SmartElement sinnvoller, weil die Galerie selbst zu viele eigene Layoutregeln mitbrachte.

Mein Fazit aus der praktischen Arbeit

SmartBoxen und SmartElements sind keine Zauberei, aber sie sind sehr nützlich. Sie erweitern inCMS dort, wo man kleine, wiederverwendbare Bausteine braucht. Für viele Anforderungen reichen HTML, CSS, etwas JavaScript und sauber definierte Editorfelder völlig aus.

Man sollte sie aber nicht mit vollwertigen Modulen verwechseln. Sobald eine Funktion automatisch Inhalte auslesen, Daten verarbeiten oder komplexe Logik ausführen soll, stößt man mit normalen SmartElements wahrscheinlich an Grenzen.

Für inCMS-Anwender ist die wichtigste Erkenntnis daher:

SmartBoxen und SmartElements sind ideal für gestaltbare Zusatzbausteine, besondere Darstellungen und kleine wiederverwendbare Elemente. Sie sind weniger geeignet für dynamische Systemfunktionen, die echte Datenlogik brauchen.

Gerade deshalb lohnt es sich, diese Möglichkeiten zu kennen. Viele kleine Wünsche, die auf den ersten Blick nach „Sonderprogrammierung“ aussehen, lassen sich damit pragmatisch lösen. Und manchmal zeigt ein Versuch auch recht schnell, wo ein SmartElement nicht mehr reicht – was ebenfalls wertvoll ist, weil man dann nicht lange in die falsche Richtung weiterarbeitet.

Praktischer Hinweis

Wer eigene SmartBoxen oder SmartElements bauen möchte, sollte mit kleinen Beispielen beginnen: ein farbiger Container, ein Button-Element, eine einfache Bildbox. Danach kann man Schritt für Schritt weitere Felder ergänzen.

Der beste Weg ist nicht, sofort ein komplexes Element zu bauen. Besser ist: Erst HTML-Grundstruktur testen, dann CSS ergänzen, dann ein Editorfeld hinzufügen, speichern, prüfen – und erst danach das nächste Feld einbauen. So findet man Fehler schneller und versteht besser, wie inCMS die Werte tatsächlich ausgibt.

Aus einer kleinen Bilddarstellung wird dann nebenbei ein gutes Lernprojekt: Man versteht, wie SmartBoxen und SmartElements aufgebaut sind, was sie leisten können und wo die Grenze zum echten Modul beginnt.

Ein Workbook dazu kannst Du hier als PDF herunterladen: inCMS_SmartBoxes_SmartElements_Workbook.pdf