Das ultimative Tutorial für das Absatzmodul von Drupal

In den letzten Monaten haben wir mit immer mehr Drupal-8-Sites zusammengearbeitet. Diese Projekte hatten alle eines gemeinsam ... sie verwendeten das Drupal Paragraphs-Modul.

Paragraphs ist ein sehr beliebtes Modul für den Umgang mit Inhalten in Drupal 8.

Absätze funktionieren ähnlich wie Inhaltsfelder, bieten aber auch vielfältige Möglichkeiten zur Gestaltung, Anordnung und Gruppierung Ihrer Inhalte.

Wenn Sie Absätze lernen möchten, ist dies die ultimative Anleitung! Lesen, sehen und folgen Sie allen 10 Teilen dieses Tutorials. Am Ende werden Sie Absätze auch für alle Ihre Websites verwenden!

Teil 1. Warum das Drupal Paragraphs-Modul verwenden?

Absatztypen können alles sein, von einem einfachen Textblock oder Bild bis hin zu einer komplexen und konfigurierbaren Diashow.

Anstatt ihren gesamten Inhalt in ein einziges WYSIWYG-Textfeld zu packen, können Endbenutzer spontan zwischen vordefinierten Absatztypen wählen. Sie können mehrere erweiterte Funktionen erstellen und Endbenutzer können auswählen, welche sie verwenden möchten.

Dies macht es für Benutzer viel einfacher, erweiterte Inhalte hinzuzufügen. Beispielsweise verstehen Benutzer möglicherweise, wie man ein Pull-Zitat in einen Inhaltstext einfügt, aber es wird möglicherweise nicht zentriert oder ganz korrekt formatiert. Sie möchten möglicherweise auch etwas Komplexeres tun, z. B. ein Callout-Feld in einen Artikel einfügen, haben aber keine Ahnung, wie sie die erforderlichen Stile hinzufügen sollen.

Das Drupal Paragraphs-Modul kann Prozesse wie diese für technisch nicht versierte Benutzer viel besser handhabbar machen und Entwicklern gleichzeitig die Möglichkeit geben, die Formatierung und das Erscheinungsbild solcher speziell formatierter Elemente auf Themenebene zu steuern.

In der Praxis können wir mit Absätzen Elemente ähnlich wie Inhaltsfelder einfügen, aber anstatt diese um den Hauptteil eines bestimmten Inhalts herum hinzuzufügen, werden sie effektiv im gesamten Hauptteil eingefügt.

Für diesen Leitfaden stellen wir uns vor, dass wir eine Website namens „Life Advice for Free“ erstellen, die Informationsinhalte in Form von Artikeln anbietet. Wenn Sie möchten, können Sie auf jeder anderen Entwicklungswebsite mitverfolgen und bei Bedarf geringfügige Anpassungen vornehmen.

Teil 2. Installieren des Drupal Paragraphs-Moduls

Wir empfehlen, für dieses Projekt eine leere Drupal 8-Testsite zu verwenden.

• Klicken Sie hier, um das Paragaphs-Modul herunterzuladen.
• Absätze erfordern auch das Modul Entity Reference Revisions.
• Nachdem Sie diese beiden Module heruntergeladen und in Ihr /modules-Verzeichnis abgelegt haben, installieren Sie sie für Ihre Site.

Teil Nr. 3. Erstellen Sie Ihre ersten Absätze

Paragraphs funktioniert, indem es uns ermöglicht, sogenannte „Absatztypen“ zu erstellen, die in unserem Fall kollektiv das Body-Feld eines bestimmten Inhaltstyps ersetzen, mit dem wir diese Paragraphs-Typen verwenden möchten.

Um Absätze nutzen zu können, müssen Sie zunächst mindestens einen Absatztyp erstellen und diesen Absatztyp dann einem Inhaltstyp hinzufügen. Dieser Prozess kann auf den ersten Blick verwirrend erscheinen, aber es ist leicht, sich damit vertraut zu machen, sobald Sie einen oder zwei Absatztypen eingerichtet haben.

In unserer Demonstration ersetzen wir das Feld Body des Standardinhaltstyps Article durch eine Handvoll Paragraphs-Typen.

Wichtig: Wenn Sie dies auf einer Website testen, die bereits über Inhalte des Typs „Artikel“ verfügt, löschen Sie nicht das Feld „Body“ des Inhaltstyps „Artikel“, wie wir dies in dieser Demonstration tun werden. Wenn Sie dies tun, verlieren Sie den Inhalt aller Artikel auf Ihrer Website. Wenn Sie an einer Website arbeiten, auf der der Artikel-Inhaltstyp bereits verwendet wurde, sollten Sie einen neuen Inhaltstyp erstellen, auf dem Sie das Paragraphs-Modul testen können.

Auf unserer Website „Life Advice for Free“ beginnen wir mit der Konfiguration von Absätzen, indem wir den Inhaltstyp Artikel bearbeiten.

• Gehen Sie zu Struktur > Inhaltstypen.
• Klicken Sie in der Artikelzeile auf die Schaltfläche „Felder verwalten“.
• Sie befinden sich nun auf der Seite „Felder verwalten“ für den Inhaltstyp Artikel. Klicken Sie auf dieser Seite auf den Dropdown-Pfeil neben der Schaltfläche „Bearbeiten“ in der Zeile „Text“ und dann auf „Löschen“.
• Bestätigen Sie das Löschen auf der nächsten Seite.

Jetzt erstellen wir unseren ersten Absatztyp.

• Navigieren Sie zu Struktur > Absatztypen.
• Klicken Sie auf „Absatztyp hinzufügen“.
• Auf der nächsten Seite müssen wir eine Bezeichnung für diesen Absatztyp bereitstellen. Für unsere Demonstration nennen wir diesen „Body-Text“, da wir ihn als Inhaltstext verwenden werden.
• Klicken Sie auf „Felder speichern und verwalten“.
• Klicken Sie auf dieser Seite „Felder verwalten“ auf „Feld hinzufügen“.
• Scrollen Sie in der folgenden Dropdown-Liste „Neues Feld hinzufügen“ nach unten und wählen Sie unter „Text“ „Text (formatiert, lang, mit Zusammenfassung)“ aus. Dies ähnelt dem standardmäßigen Textfeld, das häufig vom Inhaltstyp Artikel verwendet wird – ein Langform-Textbereich mit einem WYSIWYG-Editor.
• Auf der folgenden Seite „Feld hinzufügen“ bezeichnen wir dieses spezielle Feld ebenfalls als „Textkörper“.
• Klicken Sie auf „Speichern und fortfahren“.
• Als nächstes gelangen wir zur Registerkarte „Feldeinstellungen“ dieses Felds. Für jedes dieser Felder können wir eine zulässige Anzahl von Werten angeben. Es kann nützlich sein, für einige Felder mehr als einen Wert zuzulassen – insbesondere solche, die diskrete einzelne Informationen wie Datumsangaben, Bilddateien oder Kurztextfelder für Informationen wie Namen akzeptieren – aber für Langform-Textbereiche , ist es oft unnötig, zusätzliche Werte anzugeben, da Absätze einfach hintereinander in einem einzigen Textbereich platziert werden können. Lassen Sie uns in diesem Beispiel die Standardeinstellungen bei „Limited“ und 1 belassen.
• Klicken Sie auf „Feldeinstellungen speichern“.
• Auf der folgenden Seite „Texteinstellungen für Textkörper“ können wir alle Standardeinstellungen beibehalten. Beachten Sie, dass Benutzer weiterhin alle Formatierungsoptionen haben, die sie normalerweise mit dem WYSIWYG-Editor des Textbereichs haben würden. Wir nehmen ihnen nichts weg. Stattdessen geben wir ihnen eine zusätzliche, verbesserte Methode, um bestimmte Arten von Elementen zu ihren Inhalten hinzuzufügen.
• Klicken Sie auf „Einstellungen speichern“.
• Sie sehen jetzt Ihre neuen Felder in Ihrem neuen Absatztyp:

• Klicken Sie auf dieser nächsten Seite auf die Registerkarte „Anzeige verwalten“.
• Derzeit hat dieser Absatztyp nur ein Feld – das Textfeld „Haupttext“. Wir möchten nicht, dass zusammen mit dem Text aus diesem Feld ein Label angezeigt wird, also wählen Sie „Ausgeblendet“ in der Spalte „Label“ für dieses Feld. Das Format sollte als Standard bleiben.
• Klicken Sie auf „Speichern“.

Jetzt müssen wir diesen Absatztyp zum Inhaltstyp Artikel hinzufügen, damit dieser Inhaltstyp ihn verwenden kann. So machen wir das:

• Navigieren Sie zu Struktur > Inhaltstypen.
• Klicken Sie für den Inhaltstyp Artikel auf „Felder verwalten“.
• Klicken Sie auf „Feld hinzufügen“.
• Um unseren neuen Absatztyp mit diesem Feld zu verwenden, öffnen Sie die Dropdown-Liste „Feldtyp auswählen“ und wählen Sie „Absatz“ unter „Referenzrevisionen“.
• Nachdem Sie „Absatz“ ausgewählt haben, geben Sie das Label „Body“ ein, da wir dies als Hauptteil unseres Inhalts verwenden.
• Klicken Sie auf „Speichern und fortfahren“.
• Auf der nächsten Seite sollte „Art des zu referenzierenden Elements“ auf „Absatz“ eingestellt sein.
• „Zulässige Anzahl von Werten sollte „Unbegrenzt“ sein. Durch Auswahl von „Unbegrenzt“ können wir dieses spezielle Feld, das von unseren konfigurierten Absatztypen bereitgestellt wird, so oft einfügen, wie wir möchten. Dies wird hilfreich, wenn wir damit beginnen, neben Text auch andere Dinge in den Hauptteil des Inhalts einzufügen.
• Klicken Sie auf „Feldeinstellungen speichern“.
• Auf der folgenden Seite „Texteinstellungen für Artikel“ müssen wir unseren zuvor erstellten Absatztyp für dieses Feld verfügbar machen. Aktivieren Sie dazu das Kontrollkästchen neben „Textkörper“ unter „Typ“ unten auf der Seite. Auf diese Weise stellen wir diesen bestimmten Absatztyp in diesem Feld zur Verfügung. Wenn wir unserer Website weitere Absatztypen hinzufügen, können wir zurückkommen und diese auch für dieses Feld verfügbar machen.

• Klicken Sie auf „Einstellungen speichern“ und die Website sollte Sie zurück zur Seite „Felder verwalten“ für den Inhaltstyp führen.

Jetzt haben wir das vorherige (Standard-)Textfeld durch unser neues Textfeld ersetzt, das Absätze verwendet, und insbesondere den von uns erstellten Absatztyp "Textkörper". Jetzt konfigurieren wir ein paar weitere Einstellungen, damit es so aussieht, wie wir es wollen.

• Zunächst klicken wir auf die Registerkarte „Formularanzeige verwalten“, damit wir das neue Textfeld an einer prominenten Stelle auf der Inhaltserstellungsseite für Artikel platzieren können.
• Scrollen Sie auf dieser Seite nach unten, um unser neues Textfeld zu finden, und ziehen Sie es in die Nähe des oberen Rands der Liste, direkt unter Titel.
• Klicken Sie auf „Speichern“.

Jetzt müssen wir sicherstellen, dass der neue Absatztyp für Website-Besucher an der richtigen Stelle verfügbar ist.

• Klicken Sie auf „Anzeige verwalten“.
• Auch hier finden Sie ganz unten Body. Ziehen Sie dies nach oben, direkt unter das Bild. Wir behandeln dieses Bildfeld als große Art von Einführungs- oder Lead-in-Bild für unsere Artikel und nicht als Teil des Inhalts selbst.
• Klicken Sie auf „Speichern“.

An diesem Punkt haben wir die Einrichtung für unseren Artikel-Inhaltstyp mit diesem neuen Feld „Absätze“ abgeschlossen. Jetzt ist es an der Zeit, einige Inhalte zu erstellen, um sie zu testen.

• Gehen Sie zur Inhaltsseite Ihrer Website und klicken Sie auf „Inhalt hinzufügen“.
• Klicken Sie auf „Artikel“.
• Sie können einen beliebigen Titel für Ihren Artikel eingeben. Nennen wir für dieses Beispiel unseren Artikel „Wie man 100 Freunde findet“.
• Nun, bis hin zum Body-Feld haben Sie vielleicht bemerkt, dass es etwas anders aussieht, obwohl es immer noch das gleiche Langform-Feld mit einem WYSIWYG-Editor verwendet, genau wie zuvor. Der Unterschied besteht jetzt darin, dass wir ein umfassendes Body-Feld haben, das derzeit ein Body-Textfeld enthält. Direkt unter dem Textfeld sollte die Schaltfläche „Text hinzufügen“ angezeigt werden, mit der wir mehrere Felder hinzufügen können. An dieser Stelle wäre dies unnötig, da das derzeit verwendete lange Textfeld perfekt für die Eingabe von langem Text mit mehreren Absätzen geeignet ist, sodass wir kein zusätzliches Feld hinzufügen müssten, wenn wir einfach mehr Text in dasselbe Feld einfügen könnten . Später werden wir jedoch sehen, dass es sehr nützlich ist, zusätzliche Absatzfelder hinzufügen zu können, wenn Sie mehrere Absatztypen auf Ihrer Website implementiert haben. Geben Sie vorerst nur ein oder zwei Absätze Text in Ihr Textfeld Text ein.

Speichern Sie Ihren Artikel und sehen Sie sich die Seite so an, wie sie jeder Besucher sehen würde.

An diesem Punkt unterscheidet sich der neue Textkörper mit Absätzen nicht von einem Artikel, der das standardmäßige Textfeld verwendet. Mit Absätzen werden wir unseren Inhaltserstellern jedoch bald ermöglichen, zusätzliche Elemente zu den Inhalten hinzuzufügen, ohne wissen zu müssen, wie man sie richtig gestaltet.

Teil Nr. 4. Hinzufügen Ihres CSS zu Absätzen

Ein großer Teil dessen, was Paragraphs so nützlich macht, ist, dass wir CSS für bestimmte In-Content-Elemente schreiben können, sodass Content-Ersteller nicht versuchen müssen, so viele dieser Elemente selbst mit dem WYSIWYG-Editor oder Inline-CSS manuell zu gestalten. Das bedeutet, dass wir das Design unserer Website anpassen, damit diese Elemente genau so erscheinen, wie wir es möchten.

In vielen realen Fällen arbeiten Sie wahrscheinlich mit einem eigenen benutzerdefinierten Thema oder Unterthema, in diesem Fall können Sie es frei bearbeiten. Für dieses Tutorial werden wir ein schnelles und einfaches Unterdesign des Standard-Bartik-Designs erstellen, damit wir Best Practices befolgen und unser eigenes CSS hinzufügen können, ohne das Bartik-Design selbst zu bearbeiten. (Wir vermeiden es, Bartik – oder ein anderes Kern- oder beigetragenes Design – direkt zu bearbeiten, denn wenn wir dies tun und später ein veröffentlichtes Update auf dieses Design anwenden, gehen unsere eigenen Änderungen verloren.) Wenn Sie mit dem Erstellen von Unterdesigns nicht vertraut sind, ist das in Ordnung. Wir graben uns nicht ausführlich in den Prozess ein, sondern erstellen stattdessen eine direkte Kopie des Themas, an der wir dann einige geringfügige Änderungen vornehmen. Dies ist ein einfacher Vorgang.

• Um ein Unterthema zu erstellen, müssen Sie zuerst auf den Server zugreifen, auf dem Ihre Website gehostet wird, und zum Stammverzeichnis Ihrer Website navigieren.
• Öffnen Sie dort das Verzeichnis „Themen“. Hier werden alle benutzerdefinierten und beigesteuerten Themen und Unterthemen platziert. Erstellen Sie in diesem „themes“-Verzeichnis einen neuen Ordner namens „custombartik“ und navigieren Sie in dieses neue Verzeichnis.

Jetzt müssen wir diesem neuen Verzeichnis ein paar Dateien hinzufügen. Die erste ist die Infodatei des Themas. Öffnen Sie eine beliebige Codebearbeitungssoftware, die Sie für die Webentwicklung verwenden. Diese Info-Dateien erfordern mehrere Informationen: den Namen des Projekts (den Namen unseres Themas), die Art des Projekts (in diesem Fall „Thema“), den Maschinennamen des Basisthemas, wenn es sich um ein Unterthema handelt (wie bei uns). ist), eine kurze Beschreibung und die Hauptversion von Drupal (7.x, 8.x usw.), für die das Thema erstellt wurde. Wir geben diese Informationen in das folgende Formular ein (geben Sie alles genau so ein, wie Sie es sehen):

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme core: 8.x

Stellen Sie sicher, dass der Name des Basisdesigns „bartik“ nicht groß geschrieben wird – es ist der maschinenlesbare Name mit Berücksichtigung der Groß- und Kleinschreibung, den wir benötigen. Speichern Sie die Datei mit diesen eingegebenen Informationen als „custombartik.info.yml“. Es ist wichtig, dass Sie es unter genau demselben Namen wie den von Ihnen erstellten Ordner speichern, gefolgt von „.info.yml“.

Jetzt müssen wir die Bibliotheksdatei unseres Designs erstellen, in der wir Drupal mitteilen, wo das CSS des Designs zu finden ist und um welche Version des Designs es sich handelt. Weitere Informationen können bereitgestellt werden, aber das ist alles, was wir für unsere Zwecke benötigen.

• Öffnen Sie eine neue Datei. Achten Sie in dieser Datei genau auf die Einrückungen hier. Jeder Einzug sollte ein Tabulator mit zwei Leerzeichen sein.
• Geben Sie die folgenden Informationen genau so ein, wie sie angezeigt werden:

 global-css:  version: 0.1  css:    theme:      css/style.css: {}

• Speichern Sie diese Datei als „custombartik.libraries.yml“. Diese Datei teilt der Website im Wesentlichen mit, dass dies die Version 0.1 des Designs ist (wir hätten ihr eine beliebige Versionsnummer geben können) und dass es ein Stylesheet in unserem Designverzeichnis („custombartik“) unter css/style.css geben wird.

Jetzt müssen wir zu unserer Info-Datei zurückkehren, um Drupal anzuweisen, die Informationen unter dem „global-css“-Container zu verwenden, um unser Stylesheet zu finden.

• Öffnen Sie Ihre Datei custombartik.info.yml, fügen Sie eine leere Zeile unter Ihrer „core: 8.x“-Zeile hinzu und fügen Sie dann die folgende Informationszeile hinzu, wobei Sie die Einrückung wieder genau so beibehalten, wie sie unten angezeigt wird:

 libraries:  - custombartik/global-css

Die ganze Datei sollte nun so aussehen:

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme. core: 8.x libraries:  - custombartik/global-css

An diesem Punkt sind wir bereit, diese beiden Dateien zu unserem Design hinzuzufügen.

• Laden Sie Ihre Dateien custombartik.info.yml und custombartik.libraries.yml hoch oder kopieren Sie sie in Ihren custombartik-Ordner.
• Fügen Sie nun einen Ordner namens „css“ in Ihrem custombartik-Ordner hinzu.
• Fahren Sie fort und erstellen Sie eine leere Datei mit dem Namen „style.css“ und laden Sie sie in dieses Verzeichnis hoch. Dies wird unser Stylesheet sein.
• Bevor wir unser Stylesheet erstellen, navigieren Sie jedoch zur Seite „Erscheinungsbild“ Ihrer Website.
• Scrollen Sie zum Ende der Seite und unter dem Abschnitt „Nicht installiertes Design“ sollten Sie Ihr benutzerdefiniertes Bartik-Design sehen. Wenn Sie es nicht sehen, vergewissern Sie sich, dass Ihr custombartik-Ordner und alle seine Dateien im Themenordner des Dateisystems Ihrer Website vorhanden sind.
• Klicken Sie unter Ihrem benutzerdefinierten Design auf „Installieren und als Standard festlegen“, damit Ihre Website mit der Verwendung Ihres Designs beginnt.
• Sobald dies erledigt ist, navigieren Sie zu Ihrer Homepage und sie sollte fast genauso aussehen wie das Standard-Bartik-Design von Drupal, mit der Ausnahme, dass Sie wahrscheinlich ein kaputtes Bildsymbol anstelle des Drupal-Logos sehen werden. Das Thema sieht genauso aus wie Bartik, da wir ein Unterthema von Bartik erstellt haben, für das noch keine Anpassung vorhanden ist. Wenn Ihre Website nicht wie Bartik aussieht, und insbesondere wenn sie wie einfaches HTML ohne CSS-Stil aussieht, gehen Sie zurück zu Ihren beiden .yml-Dateien und stellen Sie sicher, dass sie genauso aussehen wie oben gedruckt.

Um schließlich das kaputte Logobild zu reparieren, kopieren wir das Logo direkt von Bartik in unser Unterdesign. Das ist in Ordnung, weil wir in Bartik eigentlich nichts ändern.

• Navigieren Sie zum Stammverzeichnis Ihrer Website und gehen Sie zu core/themes/bartik. Hier sehen Sie eine Datei namens „logo.svg“.
• Kopieren Sie diese Datei in Ihr Subtheme (das „custombartik“-Verzeichnis).
• Navigieren Sie auf Ihrer Website zu Konfiguration > Leistung und klicken Sie auf „Alle Caches löschen“. Jetzt sollte das Logo auf Ihrer Seite erscheinen.

Teil Nr. 5. Gestalten Sie Ihre Paragaphs-Felder

Jetzt, da wir ein Unterthema haben, das wir sicher bearbeiten können, können wir damit beginnen, Stilregeln für die Elemente unseres Inhalts festzulegen, die durch Absätze gesteuert werden. Zuvor sollten wir einen neuen Absatztyp erstellen, der spezielle Gestaltungsregeln erfordert. Wir folgen unserem Beispiel mit einem Feld, das ein zentriertes Bild in die Mitte eines Artikels einfügt.

• Navigieren Sie zu Struktur > Absatztypen.
• Klicken Sie auf „Absatztyp hinzufügen“.
• Wir werden das Etikett für dieses als „Zentriertes Bild“ festlegen.
• Klicken Sie auf „Felder speichern und verwalten“.
• Klicken Sie auf der nächsten Seite auf „Feld hinzufügen“ und wählen Sie „Bild“ unter „Neues Feld hinzufügen“.
• Wir bezeichnen dieses Feld auch als „Zentriertes Bild“.
• Klicken Sie auf „Speichern und fortfahren“.
• Auf der nächsten Seite können wir alle Standardwerte beibehalten, also klicken Sie auf „Feldeinstellungen speichern“.
• Dann fügen wir auf der Seite „Zentrierte Bildeinstellungen für zentriertes Bild“ ein paar einfache Einschränkungen hinzu. Stellen Sie die maximale Bildauflösung auf 650 x 450 und die minimale Auflösung auf 50 x 50 ein. Stellen Sie die maximale Upload-Größe auf 1 MB ein und klicken Sie auf „Einstellungen speichern“. Diese spezifischen Einstellungen sind nicht erforderlich, damit der Absatztyp richtig funktioniert; Wir fügen sie einfach ein, um ein reales Szenario nachzuahmen.

• Klicken Sie nun auf die Registerkarte „Anzeige verwalten“, setzen Sie das Label für das zentrierte Bild auf „Ausgeblendet“ und klicken Sie auf „Speichern“.

An diesem Punkt müssen wir diesen Paragraphen-Typ dem Paragraphen-Feld hinzufügen, das wir in unserem Artikel-Inhaltstyp haben.

• Gehen Sie zu Struktur > Inhaltstypen.
• Klicken Sie neben „Artikel“ auf „Felder verwalten“.

Sie könnten versucht sein, hier für unseren neuen Absatztyp „Zentriertes Bild“ auf „Feld hinzufügen“ zu klicken, aber denken Sie daran, dass dies mit unserem benutzerdefinierten Textfeld vermischt wird. Stattdessen fügen wir dem von uns erstellten Feld „Körper“ das Bild „Zentriert“ hinzu.

• Klicken Sie neben „Text“ auf „Bearbeiten“ und scrollen Sie zum Ende der Seite.
• Hier sehen Sie „Zentriertes Bild“, das unter unserem Absatztyp „Haupttext“ verfügbar ist.
• Aktivieren Sie das Kontrollkästchen neben „Zentriertes Bild“, um es für dieses Feld verfügbar zu machen, und speichern Sie Ihre Einstellungen.

Jetzt fügen wir ein Bild mit diesem Feld hinzu.

• Navigieren Sie zu Ihrer Inhaltsseite und bearbeiten Sie Ihren Artikel „How to Make 100 Friends“.
• Stellen wir uns vor, wir möchten irgendwo in der Mitte unseres Artikels ein zentriertes Bild einfügen. Unter dem Textfeld „Text“ sehen Sie erneut die Schaltfläche „Text hinzufügen“, um ein weiteres Textfeld „Text“ innerhalb dieses Felds „Text“ hinzuzufügen. Wenn Sie jedoch auf den Dropdown-Pfeil neben dieser Schaltfläche klicken, sehen Sie, dass jetzt auch „Zentriertes Bild“ verfügbar ist. Klicken Sie auf diese Schaltfläche und wählen Sie eine Bilddatei aus, die Sie hier hochladen möchten. Geben Sie dann einen alternativen Text an, da dieser erforderlich ist.

Jetzt haben wir das Bild zu unserem Inhalt hinzugefügt, aber derzeit wird es unter dem gesamten Text platziert. Hier verwenden wir ein zusätzliches Body-Textfeld.

• Klicken Sie auf „Textkörper hinzufügen“. Jetzt haben wir von oben nach unten ein Feld mit Fließtext, ein zentriertes Bild und ein weiteres Feld mit Fließtext. Beachten Sie, dass Sie diese, obwohl Sie dies an dieser Stelle nicht tun sollten, über die Drag-and-Drop-Pfeile oben links in den einzelnen Absatzfeldern frei verschieben können. Damit das zentrierte Bild zwischen Artikeltext eingeklemmt erscheint, gehen Sie einfach zum ersten Haupttextfeld, wählen Sie den Text aus, der nach dem Bild erscheinen soll, und schneiden Sie diesen Text aus dem Feld aus. Scrollen Sie dann nach unten und fügen Sie diesen ausgeschnittenen Text in das zweite Body-Textfeld (nach Ihrem Bild) ein.
• Klicken Sie auf „Speichern“.

Wenn Sie sich Ihren Artikel jetzt ansehen, wird er immer noch nicht ganz korrekt aussehen. Da wir unserem Design noch keine Stilregeln hinzugefügt haben, wird das Bild wahrscheinlich nach links (wie es standardmäßig der Fall ist) und nicht zentriert schweben. Es sollte jedoch nach dem Text des ersten Textfelds „Body“ und vor dem Text des zweiten Textfelds „Body“ erscheinen. Jetzt haben wir einen Artikel, in dem wir einige benutzerdefinierte Stilregeln testen können.

Teil Nr. 6. Absätze mit CSS steuern

Wir gehen jetzt zu unserem benutzerdefinierten Unterthema, um damit zu beginnen, die Ausgabe der von uns erstellten Paragraphs-Felder zu gestalten. Im Moment zielen wir speziell auf das Feld „Zentriertes Bild“ und nicht auf das umfassende Feld „Absätze“ des Inhaltstyps. Wir tun dies, weil wir möchten, dass dieses Feld jederzeit zentriert ist, unabhängig davon, wo es sich befindet. Indem wir Regeln direkt für „Zentriertes Bild“ festlegen, vermeiden wir das Festlegen unnötiger mehrerer Regeln für mehrere Kontexte.

Wir müssen jedoch auf die Klasse „Knoten“ abzielen, da es standardmäßig ein gewisses Styling für dieses Feld gibt, das unter der Klasse „Knoten“ ausgerichtet ist. Daher müssen wir diese Regeln außer Kraft setzen.

• Öffnen Sie das Stylesheet Ihres Unterthemas „custombartik“ unter custombartik/css/style.css.
• Die Datei sollte noch leer sein, aber jetzt beginnen wir damit, Regeln hinzuzufügen. Wir halten die Dinge vorerst einfach. Fügen Sie Ihrem Stylesheet die folgenden Codezeilen hinzu:

 .node .field--name-field-centered-image {  float: none;  text-align: center; } .node .field--name-field-centered-image img {  max-width: 100%;  max-height: 450px; }

Mit dem ersten Satz von Regeln zentrieren wir das Bild einfach horizontal innerhalb seiner Feldklasse und stellen sicher, dass kein Text oder irgendetwas anderes daneben schwebt. Der zweite Satz von Regeln ist nicht unbedingt erforderlich, aber ein gängiger Code, um sicherzustellen, dass Bilder nicht größer werden, als sie im Verhältnis zum Inhaltsbereich sein sollten.

• Sobald Sie dies zu Ihrer style.css-Datei hinzugefügt haben, speichern Sie Ihre Änderungen (ab hier setzt jeder Verweis auf das Speichern von Änderungen in Ihrem Unterthema auch voraus, dass Sie die Dateien auf Ihren Server hochladen oder anderweitig kopieren, wenn Sie nicht direkt auf dem Server bearbeiten wo sich Ihr Teststandort befindet).
• Navigieren Sie dann auf Ihrer Website zu Konfiguration > Leistung und klicken Sie auf „Alle Caches löschen“, um die Designänderungen auf Ihrer Website zu laden.
• Navigieren Sie zurück zu dem Artikel, zu dem Sie das zu zentrierende Bild hinzugefügt haben (oder aktualisieren Sie die Seite, wenn Sie sie bereits geöffnet haben).

Das Bild, das durch den Absatztyp „Zentriertes Bild“ platziert wurde, sollte jetzt zentriert sein, ohne dass Text zu beiden Seiten davon schwebt. Es gibt möglicherweise weitere Stile, die wir hinzufügen möchten, aber für den Zweck dieses Tutorials haben wir das getan, was wir zu diesem Zeitpunkt tun möchten – stellen Sie sicher, dass die Ausgabe dieses Felds streng von CSS gesteuert wird, damit Benutzer hinzufügen können Inhalte müssen nichts selbst mit dem WYSIWYG-Editor oder anderen Inline-Styling-Methoden stylen.

Teil Nr. 7. Absätze mit mehreren Feldern

Wir können auch Absatztypen erstellen, die selbst aus mehreren Feldern bestehen.

Anstelle des Typs „Zentriertes Bild“ können wir beispielsweise einen Typ „Zentriertes Bild mit Bildunterschrift“ erstellen, der aus einem Bild-Upload-Feld und einem begleitenden Textfeld für jedes einzelne Element dieses Typs bestehen würde. Auch dies hilft uns, die Last des Layouts von denjenigen zu nehmen, die Inhalte zur Website hinzufügen, sodass wir die Inhaltsanzeige auf Themenebene steuern können.

Lassen Sie uns diesen Typ „Zentriertes Bild mit Beschriftung“ erstellen, um den Vorgang zum Erstellen eines Absatztyps mit mehreren Feldern zu üben. Wie zu erwarten, ähnelt dieser Vorgang dem Erstellen eines Einzelfeldtyps.

• Navigieren Sie zu „Struktur“ > „Absatztypen“ und klicken Sie auf „Absatztyp hinzufügen“.
• Beschriften Sie diesen Typ mit „Zentriertes Bild mit Bildunterschrift“ und klicken Sie auf „Felder speichern und verwalten“.
• Klicken Sie auf „Feld hinzufügen“.

Da unser zuvor erstelltes Feld „Zentriertes Bild“ genau das ist, was wir für den Bildteil unseres neuen Absatztyps wollen, können wir, anstatt ein neues Feld zu erstellen, das vorherige wiederverwenden. Wählen Sie also auf der Seite „Feld hinzufügen“ unter „Neues Feld hinzufügen“ nichts aus.

• Wählen Sie unter „Vorhandenes Feld wiederverwenden“ „Bild: field_centered_image“ aus.
• Behalten Sie das Etikett „Zentriertes Bild“ bei und klicken Sie auf „Speichern und fortfahren“.
• Wir müssen unsere Einstellungen für die Größengrenzen des Bildes auf der nächsten Seite konfigurieren. Geben wir noch einmal eine maximale Bildauflösung von 650 x 450 Pixel und eine minimale von 50 x 50 Pixel ein. Legen Sie die maximale Uploadgröße auf 1 MB fest.
• Klicken Sie auf „Einstellungen speichern“.

Jetzt fügen wir ein weiteres Feld hinzu. Denken Sie daran, dass wir uns immer noch in den Einstellungen für unseren neuen Absatztyp befinden. Wenn wir also dieses zweite Feld hinzufügen, ist „Zentriertes Bild mit Beschriftung“ ein Typ mit zwei Feldern.

• Klicken Sie auf „Feld hinzufügen“ und fügen Sie ein neues Feld vom Typ „Text (einfach)“ hinzu.
• Beschriften Sie dieses Feld mit „Beschriftung“.
• Klicken Sie auf „Speichern und fortfahren“.
• Einige längere Beschriftungen müssen möglicherweise die Standardbegrenzung von 255 Zeichen überschreiten. Ändern Sie daher die maximale Länge für dieses Feld auf 500. Belassen Sie die zulässige Anzahl von Werten auf „Begrenzt“ und 1 und speichern Sie die Einstellungen.
• Die folgenden Standardwerte für Untertiteleinstellungen sind alle in Ordnung, also speichern Sie die Einstellungen auch auf dieser Seite.

Jetzt hat unser neuer Absatztyp alle Felder, die er benötigt, also steuern wir die Anzeige.

• Klicken Sie auf die Registerkarte „Anzeige verwalten“, damit wir die Feldbezeichnungen entfernen können, die in diesem Fall unnötig sind.
• Wählen Sie für beide Felder in der Spalte „Beschriftung“ „Ausgeblendet“ und klicken Sie auf „Speichern“.
• Wenn die beiden Felder nicht in der Reihenfolge wären, würden wir sie neu anordnen, sodass das Beschriftungsfeld nach dem Bildfeld kommt, aber da wir das Beschriftungsfeld zuletzt hinzugefügt haben, sollte es bereits nach dem Bildfeld positioniert sein, so wie wir es haben wollen .

Jetzt fügen wir den neuen Typ unserem Artikel-Inhaltstyp hinzu.

• Navigieren Sie zu Struktur > Inhaltstypen und klicken Sie für Artikel auf „Felder verwalten“. Wie beim Hinzufügen unseres ersten Absatztyps „Zentriertes Bild“ zum Inhaltstyp werden wir diesen neuen Absatztyp in unser benutzerdefiniertes Textfeld einfügen, anstatt insgesamt ein neues Feld hinzuzufügen.
• Klicken Sie auf der Seite „Felder verwalten“ für Artikel auf „Bearbeiten“ für Text.
• Scrollen Sie zum Ende der Seite und aktivieren Sie das Kontrollkästchen neben „Zentriertes Bild mit Bildunterschrift“, um diesen Typ in diesem Textfeld verfügbar zu machen.
• Klicken Sie auf „Einstellungen speichern“.
• Jetzt ist dieser neue Absatztyp für diejenigen verfügbar, die Artikel zur Website hinzufügen.

Lassen Sie uns fortfahren und einen neuen Artikel mit diesem Feld erstellen, und dann fügen wir unser Styling hinzu, um seine Anzeige zu steuern.

• Navigieren Sie zur Inhaltsseite, klicken Sie auf „Inhalt hinzufügen“ und dann auf „Artikel“.
• Nennen wir diesen Artikel „Ein Instrument spielen lernen kann Ihr Leben verbessern“.
• Klicken Sie auf „Haupttext hinzufügen“, um mit dem Hinzufügen von Text zum Artikel zu beginnen. Geben Sie in dieses Feld einen oder zwei Absätze Text ein.
• Klicken Sie dann unter dem Textfeld „Haupttext“ auf den Dropdown-Pfeil neben „Haupttext hinzufügen“ und wählen Sie die neu verfügbare Option „Zentriertes Bild mit Bildunterschrift hinzufügen“. Beachten Sie, dass wir jetzt wie zu erwarten zwei Felder für die Dateneingabe präsentieren – die Felder „Zentriertes Bild“ und „Beschriftung“, die zu diesem Absatztyp gehören.
• Laden Sie ein beliebiges Bild in das Bildfeld hoch und geben Sie einen alternativen Text ein.
• Geben Sie dann ein: „Die Les Paul ist eine der legendärsten Gitarren des Rock’n’Roll.“

Jetzt fügen wir nach dem Bild und der Bildunterschrift einen Teil des restlichen Texts des Artikels hinzu.

• Klicken Sie unter dem Bild- und Beschriftungsabsatztyp erneut auf „Textkörper hinzufügen“.
• Fügen Sie einen oder zwei weitere Absätze hinzu.
• Klicken Sie abschließend auf „Speichern und veröffentlichen“.

Aktuell sollte die Anzeige unseres „Zentrierten Bildes und Bildunterschrift“ halbwegs korrekt sein. Da wir das vorherige Feld „Zentriertes Bild“ wiederverwendet haben, sollte das Bild selbst bereits zentriert sein, genauso wie das vorherige Feld, das nur aus einem zu zentrierenden Bild bestand. Der Beschriftungstext hat natürlich noch keine CSS-Regeln, daher erscheint er linksbündig und sieht genauso aus wie der Text des restlichen Artikels. Also müssen wir unserem Design einige Regeln hinzufügen, um diesen Beschriftungstext zu gestalten.

Dieses Mal zielen wir beim Schreiben unseres CSS auf den gesamten Absatztyp „Zentriertes Bild mit Beschriftung“ ab und führen dann einen Drilldown zum Beschriftungsfeld innerhalb dieser Klasse durch, anstatt auf den Beschriftungstext unabhängig von seinem Container abzuzielen, wie wir es zuvor mit dem getan haben zentriertes Bild. Wir werden diesen Ansatz wählen, weil wir dieses Beschriftungstextfeld möglicherweise an anderer Stelle wiederverwenden möchten, und es ist wahrscheinlich, dass wir es in einigen Fällen anders formatieren möchten (z. B. links oder rechts ausgerichtet statt zentriert) als hier bestimmten Absatztyp.

Wir zentrieren unseren Beschriftungstext, weil das entsprechende Bild zentriert ist, und um eine visuelle Unterscheidung zwischen diesem Text und dem Text des Artikels zu ermöglichen, machen wir ihn fett (Kursivschrift würde diesen Effekt ebenfalls erzielen).

• Fügen Sie Ihrem Stylesheet die folgenden Codezeilen hinzu und speichern Sie Ihre Änderungen:

{Kozitation}.paragraph--type--centered-image-with-caption .field--name-field-caption { font-weight: bold; Textausrichtung: Mitte; {Mitzitation}

• Um unsere Änderungen auf der Website anzuzeigen, navigieren Sie dann zu Konfiguration > Leistung und löschen Sie alle Caches.
• Gehen Sie zurück und aktualisieren Sie den kürzlich erstellten Artikel, und Sie sollten sehen, dass die neuen Stilregeln in Kraft sind. Der Beschriftungstext sollte jetzt fett und zentriert unter dem Bild sein.

Natürlich können wir diesem Absatztyp als Ganzes etwas Stil verleihen. Ein Grund dafür wäre, das Bild-/Bildunterschriftelement vom umgebenden Text zu trennen und visuell deutlich zu machen, dass es als eine Einheit betrachtet werden sollte.

• Fügen Sie Ihrem Stylesheet den folgenden Code hinzu und speichern Sie Ihre Änderungen:

{Kozitation}.paragraph--type--centered-image-with-caption { border: 2px grey solid; Rand: 4px 0; Polsterung: 4px; }

Löschen Sie nun noch einmal den Cache Ihrer Website und aktualisieren Sie die Artikelseite. Das Bild und die Bildunterschrift sollten weitgehend gleich aussehen; jetzt ist jedoch die gesamte Bild-/Untertiteleinheit von einem grauen Rahmen umgeben und hat oben und unten kleine Ränder. Wir könnten hier mehr tun, um die Ästhetik zu verbessern (und der Rahmen ist wahrscheinlich nicht notwendig), aber dies demonstriert unsere Fähigkeit, Stile für einzelne Komponenten von Paragraphs-Typen sowie Paragraphs-Typen als Ganzes bereitzustellen.

Wenn nun ein technisch nicht versierter Benutzer Inhalte zur Website hinzufügt und ein großes, zentriertes Bild mit einer Bildunterschrift einfügen möchte, muss er beim Bearbeiten des Artikels nur dieses Feld „Absätze“ auswählen, ein Bild hochladen und den Text eingeben das Beschriftungsfeld. Die Formatierung wird automatisch übernommen.

Teil Nr. 8. Verwendung ganzer Knoten in Absätzen

An dieser Stelle haben wir einige Beispiele für die grundlegende Verwendung von Absätzen gesehen. Jetzt werden wir ein etwas fortgeschritteneres Beispiel angehen: die Verwendung von Absätzen, um einen ganzen Knoten innerhalb des Hauptteils eines Inhalts zu platzieren. Ein Anwendungsfall dafür wäre, eine verwandte, aber eigenständige Zusatzinformation in einen Ihrer Artikel zu platzieren (ähnlich einem Abschnitt „Wussten Sie schon?“, den Sie vielleicht neben einem Zeitschriftenartikel sehen).

In unserem Beispiel stellen wir uns vor, dass wir die Möglichkeit haben möchten, unseren Artikeln sogenannte „Infoboxen“ hinzuzufügen, und wir tun dies, indem wir einen kurzen Inhalt mit dem Titel „Eine kurze Geschichte der Harfe “ in unserem zuvor erstellten Artikel über das Erlernen eines Instruments.

Zuerst müssen wir einen Inhaltstyp für diese „Infoboxen“ erstellen.

• Navigieren Sie zu Struktur > Inhaltstypen und klicken Sie auf „Inhaltstyp hinzufügen“.
• Wir geben diesem Inhaltstyp den Namen „Infobox“.
• Schreiben Sie als Beschreibung „Kurze Informationen zur Ergänzung von Artikeln“.
• Click the “Display settings” tab, and uncheck “Display author and date information” because we don't want author and date information showing up within our Info box content.
• All of the rest of the default settings on this page should be fine. Click “Save and manage fields.”
• On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it.

• Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
• Give this type the label “Info box.”
• On the “Manage fields” page, click “Add field".
• Beneath “Add a new field,” select “Content,” found under the “Reference” header.
• For the label, write “Info box,” and save.
• All defaults are fine on the next page, so click “Save field settings” there.
• On the next settings page, scroll down until you see the “Reference type” settings.
• Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”
• Back on the “Manage fields” page, click the “Manage display” tab.
• As we've been doing so far, we'll remove the label, so select “Hidden” under the label column for the Info box field.
• Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.”
• Click “Save.”

It's time to make this Paragraphs type available to our Article content type.

• Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type.
• As we've been doing, click “Edit” for the Body field.
• Scroll down and check the box next to “Info box” under the “Paragraph types” header.
• Save your settings.

With the structure side of this implementation complete, we'll now create some content to test it out. We'll start by adding our site's first “Info box.”

• Navigate to the “Content” page, and click “Add content.”
• Choose Info box.
• For the title, enter “A Short History of the Harp.”
• Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don't want the latter to appear on the homepage; we want them only placed within other articles. So, let's quickly edit the view for our homepage to exclude these pieces of content.

• You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage.
• Navigate to Structure > Views, and edit the “Frontpage” view.
• On the view's settings page, next to the “Filter criteria” header, click “Add.”
• Select “Content type,” and then click “Apply (all displays).”
• For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view.
• Back at the view's settings page, click “Save.”
• Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we'll add our Info box to the “Learning to Play an Instrument” article.

• Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields).
• Click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option.
• Select it to include that Info box in the body of this article.

With the Info box now included in our Body, we need to place it where we want it.

• Drag and place it after the first Body text field and before the Centered image field.

With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we'll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

• So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields.
• Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field).
• Paste the cut text into the newly created (currently empty) Body text field.
• Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.
• Click “Save and keep published”.

Upon viewing the article, you'll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type's “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won't go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.

Part #9. Using Field Layout with Paragraphs

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer's (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded.

• Begin by navigating to your site's Extend page.
• Select the Field Layout and Layout Discovery (a dependency) modules, and click “Install.”
• Then, if prompted, click “Continue.”

Let's use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information.

• Navigate to Structure > Paragraphs types, and add a new Paragraphs type.
• Give it the label “Pros and cons,” and add a field.
• For this field, select “Text (formatted, long),” and give this first field the label “Pros”.
• Save and continue, and keep all of the default settings through the next two pages.
• You are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”.
• Save, and continue through the subsequent settings pages, once again keeping all default settings.
• Once you're back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly.

If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

• We have a handful of options here, and for our Pros and cons lists, we'll select “Two column.”
• Then click “Save,” and you'll be taken back to the “Manage display” page.
• Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display.
• Drag-and-drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type.

• Navigate to Structure > Content types, and click “Manage fields” for Article.
• Edit the Body field, scroll to the bottom of that field's settings.
• Check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. Then save.

Now we're ready to begin using this “Pros and cons” Paragraphs type. Let's use it in a new article.

• Create a new article called “Swimming Is a Great Way to Stay in Shape.”
• Add two or so paragraphs of Body text to this article.
• Click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.”
• Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you'd like, you can alternatively make these 5 bullet points. Do the same in the Cons field.
• If you'd like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.
• Click “Save and publish.”

Viewing the article, you'll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won't take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”

Part #10. Permissions for the Paragraphs Module

At this point, we've set up all of our Drupal Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. This is an important step. Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We'll start by giving everyone permission to view Paragraphs content.

• Navigieren Sie zur Seite „Personen“ Ihrer Website und klicken Sie auf die Registerkarte „Berechtigungen“.
• Scrollen Sie nach unten, bis Sie den Abschnitt „Paragraphs Type Permissions“ sehen. Suchen Sie unter dieser Kopfzeile nach „Textkörper: Inhalt anzeigen“ und aktivieren Sie die Kontrollkästchen für Anonymer Benutzer und Authentifizierter Benutzer.
• Machen Sie dasselbe für die Berechtigung „Inhalt anzeigen“ für alle anderen von uns erstellten Absatztypen: Zentriertes Bild, Zentriertes Bild mit Beschriftung, Infobox und Vor- und Nachteile.
• Klicken Sie auf „Berechtigungen speichern“.

An diesem Punkt können alle Benutzer den gesamten Absatzinhalt anzeigen. Fühlen Sie sich frei, sich abzumelden und die Seite als anonymer Besucher anzusehen, um dies zu bestätigen.

Erstellen Sie nun eine neue Rolle für diejenigen, die Inhalte auf unserer Website hinzufügen und bearbeiten.

• Navigieren Sie zu Personen, klicken Sie auf die Registerkarte „Rollen“ und dann auf „Rolle hinzufügen“.
• Nennen Sie diese Rolle „Inhaltsersteller“.
• Klicken Sie auf der Seite „Rollen“ auf den Dropdown-Pfeil neben der Rolle „Inhaltsersteller“ und wählen Sie „Berechtigungen bearbeiten“ aus.
• Es gibt einige Berechtigungen, die wir Benutzern dieser Rolle erteilen müssen. Einige davon haben nichts mit Absätzen zu tun, aber wir fügen sie trotzdem ein, um ein reales Szenario nachzuahmen. Außerdem wird es schwierig, die neue Rolle zuverlässig zu testen, wenn sie nicht alle Berechtigungen hat, die sie in der Praxis haben würde. Beachten Sie auch, dass wir diese Berechtigungen unter der Annahme erteilen, dass unsere Inhaltsersteller alle intern arbeiten. Das heißt, wir haben keine große Anzahl von technisch authentifizierten, aber immer noch pseudo-anonymen Benutzern, die Inhalte auf unserer Website erstellen, daher glauben wir, dass wir diesen Benutzern sicher die Erlaubnis erteilen können, Dinge wie die Verwendung des vollständigen HTML-Textformats zu tun, was in anderen Fälle würden einige Sicherheitsbedenken hervorrufen.

Hier ist die Liste der Berechtigungen, die der Rolle des Inhaltserstellers gegeben werden sollten:

Kommentar

• Eigene Kommentare bearbeiten
• Kommentar schreiben
• Genehmigung von Kommentaren überspringen
• Kommentare ansehen

Kontakt

• Zeigen Sie das seitenweite Kontaktformular an
• Verwenden Sie die persönlichen Kontaktformulare der Benutzer

Filter

• Verwenden Sie das einfache HTML-Textformat
• Verwenden Sie das vollständige HTML-Textformat
• Verwenden Sie das eingeschränkte HTML-Textformat

Knoten

• Greifen Sie auf die Inhaltsübersichtsseite zu
• Inhalte verwalten
• Zeigen Sie eigene unveröffentlichte Inhalte an
• Alle Revisionen zurücksetzen
• alle Änderungen ansehen
• Zeigen Sie eigene unveröffentlichte Inhalte an
• Artikel: Bearbeiten Sie beliebige Inhalte
• Artikel: Eigenen Inhalt bearbeiten
• Artikel: Revisionen rückgängig machen
• Artikel: Überarbeitungen anzeigen
• Infobox: Neuen Inhalt erstellen
• Infobox: Beliebigen Inhalt bearbeiten
• Infobox: Eigene Inhalte bearbeiten
• Infobox: Revisionen rückgängig machen
• Infobox: Revisionen anzeigen

Berechtigungen für Absätze

Erteilen Sie in diesem Abschnitt alle Berechtigungen mit Ausnahme von „Inhaltszugriffssteuerung vom Typ „Absätze umgehen“.

Suche

• Verwenden Sie die erweiterte Suche
• Suche verwenden

System

• Verwenden Sie die Verwaltungsseiten und die Hilfe
• Verwenden Sie die Website im Wartungsmodus
• Zeigen Sie das Verwaltungsthema an

Taxonomie

• Bearbeiten Sie Begriffe in Tags

Symbolleiste

• Verwenden Sie die Verwaltungssymbolleiste

Nutzer

• Benutzerinformationen anzeigen

Stellen Sie sicher, dass Sie auf „Berechtigungen speichern“ klicken, wenn Sie fertig sind.

Ein paar Anmerkungen zu einigen der Berechtigungen, die wir hier erteilt und nicht erteilt haben: Wir haben keine Berechtigung zum Verwalten von Absatztypen erteilt, weil wir nicht möchten, dass sie neue Absatztypen erstellen oder die Funktionsweise vorhandener Absatztypen ändern. Sie geben einfach Informationen mithilfe der Absatztypen ein, die wir als Entwickler für sie erstellt haben. Obwohl es in einigen Fällen ratsam ist, nicht-administrativen Rollen die Berechtigung zum Löschen von Inhalten zu erteilen (in den meisten Fällen reicht es aus, dass sie die Veröffentlichung von Inhalten rückgängig machen können, und das Löschen von Inhalten macht sie nicht wiederherstellbar), müssen wir ihnen die Erlaubnis erteilen um den Inhalt von Absatztypen unter „Berechtigungen für Absatztypen“ zu löschen. Dies ist notwendig, denn wenn sie diese Art von Inhalt nicht löschen können und versehentlich auf klicken, um Inhalte über den Typ Absätze hinzuzufügen, die sie in einem bestimmten Artikel nicht wirklich benötigen, gibt es für sie keine Möglichkeit, diese Einheit zu entfernen Inhalt aus dem Artikel. Dies wäre vergleichbar mit dem Verbieten der Verwendung der Rücktaste.

Um unsere neuen Berechtigungen zu testen, erstellen wir einen neuen Benutzer mit der Rolle „Inhaltsersteller“ und durchlaufen den Vorgang des Hinzufügens eines neuen Artikels als dieser Benutzer.

• Navigieren Sie zu Personen und klicken Sie auf „Benutzer hinzufügen“.
• Erstellen Sie einen Benutzer namens Mary (Sie können die E-Mail-Adresse überspringen) mit einem Passwort, das Sie sich leicht merken können.
• Stellen Sie sicher, dass der Status des Benutzers als „Aktiv“ gekennzeichnet ist, und stellen Sie vor allem sicher, dass Sie die Rolle „Inhaltsersteller“ für diesen Benutzer aktivieren.
• Klicken Sie dann auf „Neues Konto erstellen“.
• Melden Sie sich ab und als Mary wieder an. Wenn die Berechtigungen korrekt zugewiesen wurden, sollten Sie Zugriff auf die Admin-Symbolleiste haben.
• Klicken Sie in der Symbolleiste auf „Verwalten“, wenn Sie die Verwaltungslinks („Inhalt“, „Struktur“ usw.) nicht sehen.
• Navigieren Sie dann zu Inhalt und fügen Sie einen neuen Inhalt vom Typ Artikel hinzu. Y
• Sie können diesen Artikel mit „Brokkoli ist großartig für Sie“ betiteln.
• Fügen Sie ein Textfeld Text hinzu und geben Sie Text ein.
• Sie sollten dann durchgehen und versuchen, Inhalte für jeden von uns erstellten Absatztyp hinzuzufügen: Zentriertes Bild, Zentriertes Bild mit Beschriftung, Infobox sowie Vor- und Nachteile.
• Speichern Sie danach den Artikel und sehen Sie ihn sich an. Dieser vollständige Prozess sollte derselbe sein wie damals, als wir dies als Site-Administrator getan haben, und Sie sollten dann in der Lage sein, alle Inhalte problemlos anzuzeigen.

Wenn Sie nicht die Möglichkeit haben, eine oder mehrere davon hinzuzufügen, oder wenn Sie beim Versuch, dies zu tun, auf andere Probleme stoßen, haben Sie wahrscheinlich eine oder mehrere der erforderlichen Berechtigungen verpasst, als Sie ihnen die Rolle des Inhaltserstellers erteilt haben. Kehren Sie zu den Berechtigungen für den Inhaltsersteller zurück und vergewissern Sie sich, dass Sie ihm alle oben aufgeführten Berechtigungen erteilt haben – insbesondere die unter der Überschrift „Paragraphs Type Permissions“.

Abschluss des Absätze-Tutorials

Nachdem Sie bestätigt haben, dass Sie Inhalte mit Absatzinhalten als Inhaltsersteller erstellen und anzeigen können, haben Sie dieses Lernprogramm abgeschlossen. An dieser Stelle sollten Sie verstehen, warum und wie Sie das Paragraphs-Modul verwenden.

Um es noch einmal zusammenzufassen, der Nutzen dieses Moduls liegt in seiner Fähigkeit, spezielle In-Article-Content-Komponenten zu definieren, wie z. B. Boxen mit Zusatzinformationen und zentrierte Bilder mit Bildunterschriften, ohne Content-Ersteller zu zwingen, Dinge selbst zu gestalten.

Mit Absätzen werden sie einfach gebeten, den Inhalt für diese Teile unserer Artikel bereitzustellen, und wir als Entwickler können seitenweite Regeln (unter Verwendung von CSS) schreiben, wie dieser Inhalt angezeigt werden soll. Dies erleichtert den Inhaltserstellungsprozess für technisch nicht versierte Benutzer und macht das Erscheinungsbild solcher Inhalte sowohl für technisch versierte als auch für nicht versierte Benutzer einheitlicher.