Layout Builder

Der neue Drupal Layout Builder

Die Drupal Version 8.7 erscheint mit zahlreichen Neuerungen und Optimierungen. Die sogenannten Minorreleases (auf Deutsch Nebenversionsnummer) beziehen sich auf die erste Zahl hinter der aktuellen Hauptversionsnummer (Drupal 8.X) und erscheinen bei Drupal zweimal im Jahr. Spricht man über Drupal 8.7 landet man meistens als erstes bei dem neuen Layout Builder.

Dieses Modul wurde für Drupal 8.7 finalisiert und neu in den Drupal Core aufgenommen. Zurecht ist es ein großes Thema, da an diesem Modul sehr lange gearbeitet wurde und es ein gutes Beispiel für die aktive Open Source Community von Drupal ist. So haben an dem Modul 68 verschiedene Firmen und Organisationen gearbeitet. Insgesamt wirkten 123 Entwickler und Tester an dem Projekt mit.

Layout Builder nun im Drupal Core

Hier erläutern wir was notwendig ist, um mit dem Layout Builder zu arbeiten und zeigen ein paar grundlegende Funktionen:

Über „Extend“ gelangt man zu den Moduleinstellungen von Drupal: Beginnen wir dort mit der Aktivierung des Moduls. Auch wenn der Layout Builder nun dem Kernbereich (Drupal Core) hinzugefügt wurde, heißt das nicht automatisch, dass die Funktion nach dem Update auf Drupal 8.7 sofort zur Verfügung steht. Der Layout Builder muß noch aktiviert werden. Ein zusätzlicher Modul-Download ist aber nicht notwendig.

Layout Builder aktivieren

Im oberen Bereich sind unter „Core“ alle Core-Module von Drupal gelistet. Um den Layout-Builder zu aktivieren, müssen, wie bei dem Screenshot oben zu sehen, die beiden Module Layout Builder und Layout Discovery aktiviert bzw. installiert werden. Der Installationsvorgang dauert nur wenige Sekunden:

Use Layout Builder

Ist das Layout Builder Modul erstmal installiert, so können die ersten Einstellungen vorgenommen werden. Etwas versteckt in den Menüs der Content types muß der Layout Builder für den jeweiligen Content type angeschaltet werden.

Dazu wählt man zunächst "Structure" und klickt dort auf "Content types". Jetzt erscheinen die im System verfügbaren Content types. Über "Manage fields" wählt man einen aus und muß dann noch auf den Reiter "Manage display" klicken. Dort hat man endlich die Option “Use Layout Builder” im Bereich „Layout options“.

Option: „Allow each content item to have its layout customized.“

Klickt man „Use Layout Builder“ an, so erscheint noch eine weitere Option: „Allow each content item to have its layout customized.“

Mit dieser Option trifft man eine ziemlich grundlegende Entscheidung. Mit „Allow each content (...) layout customized.“ steht der Layout Builder bei jedem einzelnen Inhalt dieses Content types zur Verfügung. Dies bedeutet, dass auch bei jedem einzelnen Inhalt das Layout verändert werden darf. Möchte man den Layout Builder jedoch zentral für das Erscheinungsbild aller Inhalte eines Content types verwenden, schaltet man diese Option nicht an.


In diesem Beispiel demonstrieren wir jedoch, wie man mit Hilfe des Layout Builders kleine Anpassungen an dem Layout einzelner Artikel vornehmen kann. Dazu muß die Option "Allow each content item to have its layout customized." aktiviert sein. Nur wenn diese aktiviert ist, dann erscheint im Editormoduls eines Inhalts der zusätzliche Reiter “Layout” - siehe Screenshot.

Sections und Blocks

Verwendet man den Layout Builder kann man die Seite aus beliebig vielen Sections aufbauen. Beim Anlegen einer Selection muß ausgewählt werden, ob diese Section ein-, zwei-, drei-, oder vierspaltig ist. Anschließend definiert man die prozentualen Verhältnisse der Spalten zueinander (Beispiel: Column widths 50% / 50%).

Den Sections bzw. den Spalten der Sections können dann Blocks hinzugefügt werden. Die Blöcke wiederum bieten eine große Auswahl an Feldern und Elementen, die dann innerhalb eines Blocks ausgegeben werden. In eine Section können beliebig viele Blöcke hinzugefügt werden, sodass die Layouterstellung sehr flexibel ist.

Drag & Drop Layout

Ist die Bearbeitbarkeit jedes Nodes aktiviert, so kann nach Auswahl des Nodes über den Reiter Layout die Layout Builder Oberfläche aufgerufen werden.

Möchte man nun Elemente anders positionieren, dann kann dies wirklich einfach per Drag & Drop erfolgen. Wie im Screenshot zu sehen, können beispielsweise die Tags einfach unter das Bildelement gezogen werden. Abgerundet wird dieser ganze Vorgang durch die Möglichkeit, dass für das Layout verschiedene Versionen angelegt werden. So kann auf Bedarf wieder auf das ursprüngliche Erscheinungsbild zurückgewechselt werden.

Unsere Kunden

Drupal at its best

Bromer kunst

Eine der führenden Schweizer Kunstgalerien mit über 1600 m² Ausstellungsfläche.

On The Go

Glutenfrei verreisen leicht gemacht mit Dr. Schär und Drupal

Norstat

Datenerhebung und -management mit über 650.000 Teilnehmer aus 18 Länder.

tyntec

Global Connectivity - Netzwerkinfrastruktur die mit mehr als 800 Betreibern in mehr als 150 Ländern verbunden ist.