Um eine gut aussehende Website mit Backdrop CMS zu bauen, bedarf es mehr als eines passenden Design-Themes. Backdrop erlaubt bekanntermaßen eine sehr flexible Datenarchitektur. Das bedeutet: Fast jede Backdrop-Website besteht aus einem eigenen Set von HTML-Elementen. Diese Elemente wollen im Detail gestaltet werden, und dabei hilft das Modul Field Wrappers.
Das Modul klinkt sich in die Anzeige-Einstellungen von Backdrop-Inhaltstypen ein. Es ermöglicht, die umgebenden HTML-Elemente für einzelne Felder festzulegen. Anstelle des Standard-Elements div lassen sich etwa span, eine semantische Überschrift wie h2, ein p-Absatz oder Formate wie strong als umgebender 'Wrapper' für das ganze Feld, einzelne Feld-Instanzen oder die optionale Feldbezeichnung auswählen. Soll der HTML-Code schlank gehalten werden, kann auch ganz auf Wrapper verzichtet werden. Außerdem bietet das Modul die Option, CSS-Klassen für Felder anzugeben.
Ein Beispiel
Wozu Field Wrappers gut sein kann, zeige ich exemplarisch anhand einer Backdrop-Website, deren Design vom mitgelieferten Basis-Theme festgelegt wird. Der Inhaltstyp "Post" wurde leicht angepasst und um einige Felder ergänzt, um regelmäßige Beiträge zu erfassen und darzustellen. Daten-technisch läuft damit alles wie gewünscht, doch die Darstellung lässt noch zu wünschen übrig:
Probleme der obigen Darstellung:
- Der Untertitel wird nicht hervorgehoben.
- Der Call-to-Action-Link (CTA) ist kaum zu erkennen.
- Schlagwörter werden untereinander dargestellt.
- Zwischen CTA und Schlagwörtern fehlt eine optische Trennung.
Um die Darstellung zu verbessern, habe ich die Anzeige wie folgt konfiguriert:
- Untertitel, Field wrapper:
strong - Call to Action, Class:
button - Schlagwörter, Item wrapper:
span
Hier das Ergebnis:
Die Änderungen sind nicht weltbewegend, doch sie tun der Darstellung des Beitrags auf jeden Fall gut.
Einschränkungen, Optionen, Alternativen
Bei der Gestaltung des CTA-Links im Beispiel musste ich übrigens leicht schummeln. Denn leider führt die Angabe der button-Klasse an einem Link bei Nutzung des Basis-Themes nicht zu einer einwandfreien Gestaltung, da Buttons dort bisher nur als input-Elemente berücksichtigt werden. Wie weit die Ergebnisse des Moduls Field Wrappers reichen, hängt also stark davon ab, welche CSS-Definitionen das verwendete Theme bietet. Optimal wäre in diesem Zusammenhang ein Theme, das Helferklassen für die Darstellung mehrerer Button-Typen und weiterer Elemente mitbringt.
Wer kein spezielles (oder eigenes) Theme nutzen möchte, kann zur Definition einfacher CSS-Regeln auf das Modul CSS Injector zurückgreifen, das wir bereits in unserem Blog vorgestellt haben. Dieses Hilfsmodul spielt gut mit Field Wrappers zusammen, wenn es darum geht, eine gute Darstellung zu erreichen, ohne in die Theme-Entwicklung einzusteigen. Für mich war es z.B. das Mittel der Wahl, um die oben diskutierte Button-Darstellung zu verbessern.
Für Website-Projekte, bei denen die Darstellung mit der Hilfe von Field Wrappers an seine Grenzen stößt, gibt es eine Vielzahl von Alternativen, die häufig miteinander kombiniert werden: Entwicklung eines Themes mit eigenen HTML-Templates, Anzeige von Inhalten mit Hilfe von Views oder die elaborierte Nutzung von Backdrops Layout-System.
Fazit
Field Wrappers ergänzt die klassischen Anzeige-Einstellungen von Backdrop CMS und schließt damit eine wichtige Lücke bei der Gestaltung von Websites, die gar nicht oder nur begrenzt auf professionelle Frontend-Entwicklung setzen (können). Eine der spannendsten Alternativen ist die Nutzung des einzigartigen Layout-Systems von Backdrop. Dazu hoffentlich bald mehr in diesem Blog.