Die Backdrop-Startseite, Finetuning mit Inhaltsblöcken

In Teil I dieser Beitragsreihe ging es darum, mit Backdrop die Startseite für die Website der fiktiven Buchhandlung ABC anzulegen. Das Layout und die Inhalte zu erstellen, war einfach, die Darstellung ließ dagegen noch Wünsche offen.

Teil II beschäftigte sich genauer mit dem Design der Seite. Durch die Installation zusätzlicher Themes ließ die Darstellung sich leicht verbessern. Für weitergehende Gestaltungswünsche war der Einsatz eigener CSS-Definitionen gefragt.

Im dritten Beitrag soll das Ergebnis nun durch den Einsatz von Inhaltsblöcken für die redaktionelle und mehrspachige Nutzung verbessert werden.

Hero- und Custom-Blöcke

In Teil I der Beitragsreihe habe ich die Backdrop-Startseite durch die Platzierung verschiedener Blöcke in das Home-Layout gebaut. Dazu habe ich – neben einem Block mit Navigationsleiste und verschiedenen Blöcken mit Inhaltslisten – auf prominent dargestellte 'Hero blocks' und benutzerdefinierte 'Custom blocks' zurückgegriffen. Bei letztgenannten handelt es sich um einfache Elemente, die über einen Texteditor mit Inhalt befüllt werden können. Da der Editor auch das Einfügen von Bildern erlaubt, konnte ich auf diese Weise z.B. einen einfachen Teaser-Beitrag gestalten. Eine praktische Sache, allerdings mit zwei Haken:

Die redaktionelle Bearbeitung von Blöcken erfordert die recht weitgehende Berechtigung zur Konfiguration des Layout-Systems. Kein Problem, wenn Website-Architektur und Redaktion ohnehin von der gleichen Person erledigt werden. Für Redakteur:innen, die ausschließlich Inhalte bearbeiten möchten, ist das Layout-System jedoch zu komplex.
Custom-Blöcke sind – wie auch Hero-Blöcke – nicht wirklich für mehrsprachige Websites geeignet.

Eigene Inhaltsblöcke als Alternative

Wie es besser geht, habe ich grundsätzlich in einem Beitrag über Content-Schnipsel und Inhaltsblöcke gezeigt. Nach Erweiterung des Block-Systems durch einen eigenen Inhaltstyp mit 'hidden path content' lassen sich eigene Inhaltsblöcke in gewohnter Umgebung und mit den üblichen redaktionellen Berechtigungen bearbeiten. Außerdem können sie leicht in verschiedene Sprachen übersetzt werden. Konkret würde ich in etwa wie folgt vorgehen:

Inhaltstyp vorbereiten

Zunächst füge ich einen neuen Inhaltstyp hinzu und nenne ihn z.B. Infobox.
Im Reiter Berechtigungen aktiviere ich für die Rolle Editor die Berechtigung Beliebigen Inhalt bearbeiten.
In den Anzeige-Einstellungen des Inhaltstypen aktiviere ich die Option Pfadanzeige verbergen.
Wenn die Website mehrsprachig ist, aktiviere ich in den Einstellungen zur Mehrsprachigkeit die Option mit Übersetzung.
Nach dem Speichern wechsle ich zur Seite Verwaltung > Konfiguration > Benutzerkonten > Berechtigungen und aktiviere für die Rolle Editor die Berechtigungen Kontextabhängige Links verwenden sowie Verborgene Pfade anzeigen.
Anschließend ergänze ich den Infobox-Inhaltstyp um ein Textfeld und ein eigenes Feld für Bilder. Ein Bild-Feld bietet andere Möglichkeiten als der Text-Editor, z.B. die Auswahl eines vordefinierten Bildstils unter Anzeige verwalten.

Inhalt platzieren

Zur Vorbereitung füge ich einen neuen Inhaltseintrag vom Typ Infobox hinzu, gebe im Formular meinen Inhalt ein und speichere den Eintrag.
Dann gehe ich zum gewünschten Layout (Verwaltung > Struktur > Layouts > Home page). Dort wähle ich im gewünschten Bereich den Link Block hinzufügen und filtere nach Existing content.
Im folgenden Dialog filtere ich nach dem Titel des neuen Beitrags, wähle den Beitrag aus, treffe weitere Einstellungen, und klicke auf den Button Block hinzufügen.
Schließlich speichere ich das Layout.

Ergebnis: Der Block mit Inhalt wird auf der Startseite angezeigt. Redakteurinnen und Redakteure finden den Eintrag auf der Seite zur Inhaltsverwaltung. Außerdem können sie den Eintrag über einen Kontext-Link bearbeiten:

Inhaltsblock mit Kontextlink zum Bearbeiten

So weit, so gut! Doch leider lässt sich auf die oben beschriebene Weise kein Hero-Block einfügen.

Sonderfall Hero-Block

Um den von Backdrop mitgelieferten Hero-Block zu ersetzen, fehlt noch ein Hintergrundbild. Gut, das sollte eigentlich kein Problem sein: Ich ergänze den Infobox-Inhaltstyp einfach um ein weiteres Bild-Feld, das für den Hintergrund verwendet wird. Aber wie lege ich fest, dass Bilder dieses Feldes als Hintergrund angezeigt werden? Out of the box funktioniert das nicht. Zum Glück ergibt die Suche nach einer passenden Lösung, dass Xela bereits das Modul Background Images Formatter von Drupal nach Backdrop portiert hat. Damit klappt die Sache wunderbar:

Nach der Installation des Zusatzmoduls gehe ich zum Inhaltstyp Infobox bzw. zu dessen Unterseite Felder verwalten und füge ein neues Bildfeld namens Hintergrund-Bild hinzu.
Nach dem Speichern wechsle ich zur Unterseite Anzeige verwalten und wähle das Standard-Display. Auf der nächsten Seite wähle ich den Link zum Konfigurieren des Hintergrund-Bilds und passe die umfangreichen CSS-Einstellungen an:
Wie oben für Custom-Blöcke beschrieben, füge ich auch hier einen neuen Inhaltseintrag vom Typ Infobox hinzu und platziere ihn als Block mit Existing content im Layout. Im Block-Dialog wähle ich ein 'dynamisches' Design und ergänze einige CSS-Klassen für die typische Hero-Darstellung.

Zwischenfazit zu Teil III

Teile des Block-Systems von Backdrop durch selbst erstellte Inhaltsblöcke zu ersetzen, mag anfangs ungewohnt sein. Das Konzept ist jedoch sehr flexibel und lohnt sich spätestens für mehrsprachige Seiten oder wenn eine benutzerfreundliche Bearbeitung von Blöcken gefragt ist.