Projektspezifische Layout-Varianten für Inhaltsmodule

16. Juli 2019

Schon immer war es möglich, per CSS bestehende Layouts von Inhaltsmodulen zu "überschreiben" und damit das Layout von Modulen global anzupassen. Was bisher nicht möglich war ist, für bestehende Module eine Liste von "Layout-Varianten" zu definieren, aus denen der Autor im Contentmanager auswählen kann.

Womodo 7.7 bietet nun genau das.

Um im Projekt eine Liste von Stilen zu definieren, die dem Autor zur Verfügung stehen, muß zunächst ein TMLScript-Modul mit folgendem Pfad erstellt werden:

tmlscript/wga/content-manager/module-css-classes.tmlscript

Dieses Script wird vom Contentmanager (CM-Neo und CM-Classico) ausgeführt, um die Liste der verfügbaren CSS-Klassen je Inhaltsmodul zur Auswahl anzubieten. Das Script muß dazu ein JS-Objekt zurückgeben, das als Key die Id des Inhaltsmoduls und als Wert ein Array von CSS-Klassen enthält.

Beispiel:

return{
cm_tile: ["Blue|blue", "Green|green", "Fade|fade"]
}

Wenn ein Autor eines oder mehrere der verfügbaren Stile auswählt, werden die CSS-Klassen dem Root-<div> des Modules hinzugefügt.

<div class="module module-cm_tile blue fade">...</div>

Die CSS-Klassen müssen nun nur noch im (s)css Code des Projekts definiert werden:

.module-cm_tile{
&.blue{
> .content{
background: blue;
}
}
}