Le tutoriel ultime pour le module Paragraphes de Drupal

Au cours des derniers mois, nous avons travaillé avec de plus en plus de sites Drupal 8. Ces projets avaient tous une chose en commun... ils utilisaient le module Drupal Paragraphs.

Paragraphs est un module très populaire pour gérer le contenu dans Drupal 8.

Les paragraphes fonctionnent de la même manière que les champs de contenu, mais offrent également un large éventail d'options pour la conception, la mise en page et le regroupement de votre contenu.

Si vous voulez apprendre les paragraphes, c'est le guide ultime ! Lisez, regardez et suivez les 10 parties de ce didacticiel. À la fin, vous utiliserez également Paragraphes pour tous vos sites !

Partie 1. Pourquoi utiliser le module Drupal Paragraphs ?

Les types de paragraphe peuvent aller d'un simple bloc de texte ou d'une image à un diaporama complexe et configurable.

Au lieu de mettre tout leur contenu dans un seul champ de corps WYSIWYG, les utilisateurs finaux peuvent choisir à la volée entre des types de paragraphe prédéfinis. Vous pouvez créer plusieurs fonctionnalités avancées et les utilisateurs finaux peuvent choisir celle qu'ils souhaitent utiliser.

Cela permet aux utilisateurs d'ajouter plus facilement du contenu avancé. Par exemple, les utilisateurs peuvent comprendre comment ajouter un guillemet d'extraction dans un corps de contenu, mais il se peut qu'il ne soit pas centré ou formaté correctement. Ils peuvent également vouloir faire quelque chose de plus complexe, comme inclure une boîte de légende dans un article, mais n'ont aucune idée de la façon d'ajouter les styles requis.

Le module Drupal Paragraphs peut rendre les processus comme ceux-ci beaucoup plus gérables pour les utilisateurs non techniques tout en donnant aux développeurs la possibilité de contrôler la mise en forme et l'apparence de ces éléments spécialement formatés au niveau du thème.

En pratique, Paragraphs nous permet d'insérer des éléments un peu comme des champs de contenu, mais au lieu de les ajouter autour du corps d'un élément de contenu donné, ils sont effectivement insérés dans tout le corps.

Pour ce guide, nous allons imaginer que nous créons un site Web appelé "Life Advice for Free", qui propose un contenu informatif sous forme d'articles. Vous pouvez suivre sur n'importe quel autre site Web de développement si vous le souhaitez, en faisant des ajustements mineurs si nécessaire.

Partie 2. Installation du module Drupal Paragraphs

Nous vous recommandons d'utiliser un site de test Drupal 8 vierge pour ce projet.

• Cliquez ici pour télécharger le module Paragaphs.
• Les paragraphes nécessitent également le module Entity Reference Revisions.
• Une fois que vous avez téléchargé ces deux modules et que vous les avez placés dans votre répertoire /modules, installez-les pour votre site.

Partie #3. Créer vos premiers paragraphes

Les paragraphes fonctionnent en nous permettant de créer ce qu'on appelle des "types de paragraphes" qui, dans notre cas, remplaceront collectivement le champ Corps de tout type de contenu donné avec lequel nous voulons utiliser ces types de paragraphes.

Pour commencer à tirer parti des paragraphes, vous devez d'abord créer au moins un type de paragraphes, puis vous devez ajouter ce type de paragraphes à un type de contenu. Ce processus peut sembler déroutant au premier abord, mais il est facile de se familiariser avec une fois que vous avez configuré un ou deux types de paragraphes.

Dans notre démonstration, nous allons remplacer le champ Corps du type de contenu Article par défaut par une poignée de types Paragraphes.

Important : Si vous testez ceci sur un site qui a déjà un contenu de type Article, ne supprimez pas le champ Corps du type de contenu Article comme nous sommes sur le point de le faire dans cette démonstration. Si vous le faites, vous perdrez le corps de tous les articles de votre site Web. Si vous travaillez sur un site dans lequel le type de contenu Article a déjà été utilisé, vous devez créer un nouveau type de contenu sur lequel tester le module Paragraphes.

Sur notre site "Life Advice for Free", nous commencerons à configurer les paragraphes en modifiant le type de contenu de l'article.

• Accédez à Structure > Types de contenu.
• Cliquez sur le bouton "Gérer les champs" dans la ligne Article.
• Vous serez maintenant sur la page "Gérer les champs" pour le type de contenu Article. Sur cette page, cliquez sur la flèche déroulante à côté du bouton "Modifier" sur la ligne Corps, puis cliquez sur Supprimer.
• Confirmez la suppression sur la page suivante.

Nous allons maintenant créer notre premier type de paragraphes.

• Accédez à Structure > Types de paragraphes.
• Cliquez sur "Ajouter un type de paragraphes".
• Sur la page suivante, nous devons fournir une étiquette pour ce type de paragraphes. Pour notre démonstration, nous appellerons celui-ci "Corps du texte", puisque nous allons l'utiliser comme corps de notre contenu.
• Cliquez sur "Enregistrer et gérer les champs".
• Sur cette page "Gérer les champs", cliquez sur "Ajouter un champ".
• Dans la liste déroulante "Ajouter un nouveau champ" suivante, faites défiler vers le bas et sous "Texte", sélectionnez "Texte (formaté, long, avec résumé)". Ceci est similaire au champ Corps par défaut que le type de contenu Article utilise souvent, une zone de texte longue avec un éditeur WYSIWYG.
• Sur la page "Ajouter un champ" suivante, nous étiqueterons également ce champ particulier "Corps du texte".
• Cliquez sur "Enregistrer et continuer".
• Ensuite, nous sommes redirigés vers l'onglet « Paramètres du champ » de ce champ. Pour chacun de ces champs, nous pouvons spécifier un nombre autorisé de valeurs. Il peut être utile d'autoriser plus d'une valeur pour certains champs, en particulier ceux qui acceptent des informations discrètes individuelles, telles que des dates, des fichiers image ou des champs de texte abrégés pour des informations telles que des noms, mais pour les zones de texte longues , il est souvent inutile de fournir des valeurs supplémentaires puisque les paragraphes peuvent simplement être placés les uns après les autres dans une même zone de texte. Dans cet exemple, laissons les paramètres par défaut sur "Limité" et 1.
• Cliquez sur "Enregistrer les paramètres du champ".
• Sur la page suivante "Paramètres du corps du texte pour le corps du texte", nous pouvons conserver toutes les valeurs par défaut. Notez que les utilisateurs auront toujours toutes les options de formatage qu'ils auraient normalement avec l'éditeur WYSIWYG de la zone de texte. Nous ne leur enlevons rien. Ce que nous allons faire à la place, c'est leur donner une méthode supplémentaire et améliorée pour ajouter certains types d'éléments à leur contenu.
• Cliquez sur "Enregistrer les paramètres".
• Vous verrez maintenant vos nouveaux champs dans votre nouveau type de paragraphe :

• Sur cette page suivante, cliquez sur l'onglet "Gérer l'affichage".
• Actuellement, ce type de paragraphes n'a qu'un seul champ : le champ Corps de texte. Nous ne voulons pas qu'une étiquette apparaisse avec le texte de ce champ, alors sélectionnez "Masqué" sous la colonne Étiquette pour ce champ. Le format doit rester par défaut.
• Cliquez sur "Enregistrer".

Nous devons maintenant ajouter ce type de paragraphes au type de contenu Article afin que ce type de contenu puisse l'utiliser. Voici comment nous procédons :

• Accédez à Structure > Types de contenu.
• Cliquez sur "Gérer les champs" pour le type de contenu Article.
• Cliquez sur "Ajouter un champ".
• Pour utiliser notre nouveau type de paragraphes avec ce champ, ouvrez la liste déroulante "Sélectionner un type de champ" et sélectionnez "Paragraphe" sous "Révisions de référence".
• Après avoir sélectionné "Paragraphe", fournissez l'étiquette "Corps" car c'est ce que nous utilisons comme corps de notre contenu.
• Cliquez sur "Enregistrer et continuer".
• Sur la page suivante, "Type d'élément à référencer" doit être défini sur "Paragraphe".
• "Le nombre de valeurs autorisé doit être" Illimité ". En sélectionnant "Illimité", nous pouvons insérer ce champ spécial fourni par nos types de paragraphes configurés autant de fois que nous le souhaitons. Cela deviendra utile lorsque nous commencerons à insérer d'autres éléments que du texte dans le corps du contenu.
• Cliquez sur "Enregistrer les paramètres du champ".
• Sur la page suivante "Paramètres du corps du texte pour l'article", nous devons rendre notre type de paragraphes créé précédemment disponible pour ce champ. Pour ce faire, cochez la case à côté de "Corps du texte" sous "Type", près du bas de la page. C'est ainsi que nous rendons ce type de paragraphes particulier disponible dans ce champ. Au fur et à mesure que nous ajoutons d'autres types de paragraphes à notre site, nous pouvons revenir et les rendre également disponibles dans ce champ.

• Cliquez sur "Enregistrer les paramètres" et le site devrait vous ramener à la page "Gérer les champs" pour le type de contenu.

Nous avons maintenant terminé de remplacer le champ Corps précédent (par défaut) par notre nouveau champ Corps, qui utilise des paragraphes, et plus particulièrement le type de paragraphes "Corps du texte" que nous avons créé. Nous allons maintenant configurer quelques paramètres supplémentaires pour qu'il apparaisse comme nous le souhaitons.

• Pour commencer, nous allons cliquer sur l'onglet « Gérer l'affichage du formulaire » afin de pouvoir placer le nouveau champ Corps à un emplacement bien en vue sur la page de création de contenu pour les articles.
• Sur cette page, faites défiler vers le bas pour trouver notre nouveau champ Corps et faites-le glisser vers le haut de la liste, juste en dessous de Titre.
• Cliquez sur "Enregistrer".

Nous devons maintenant nous assurer que le nouveau type de paragraphe est disponible au bon endroit pour les visiteurs du site.

• Cliquez sur "Gérer l'affichage".
• Encore une fois, vous trouverez Body en bas. Faites-le glisser vers le haut, juste en dessous de Image. Nous traiterons ce champ d'image comme une grande sorte d'image d'introduction ou d'introduction pour nos articles et non comme une partie du contenu lui-même.
• Cliquez sur "Enregistrer".

À ce stade, nous avons terminé la configuration de notre type de contenu Article à l'aide de ce nouveau champ Paragraphes. Il est maintenant temps de créer du contenu pour le tester.

• Accédez à la page Contenu de votre site et cliquez sur "Ajouter du contenu".
• Cliquez sur "Article".
• Vous pouvez entrer n'importe quel titre pour votre article. Pour cet exemple, appelons notre article "Comment se faire 100 amis".
• Maintenant, jusqu'au champ Corps, vous avez peut-être remarqué qu'il semble légèrement différent, bien qu'il utilise toujours le même champ de forme longue avec un éditeur WYSIWYG comme avant. La différence est maintenant que nous avons un champ Corps englobant qui contient actuellement un champ de texte Corps. Juste en dessous du champ Corps de texte, vous devriez voir un bouton "Ajouter un corps de texte", qui nous permet d'ajouter plusieurs champs. À ce stade, cela serait inutile car le champ de texte long actuellement utilisé est parfaitement adapté à la saisie de texte long et multi-paragraphes, nous n'aurions donc pas besoin d'ajouter un champ supplémentaire lorsque nous pourrions simplement ajouter plus de texte dans le même champ . Plus tard, cependant, nous verrons qu'il devient très utile de pouvoir ajouter des champs de paragraphes supplémentaires lorsque vous avez implémenté plusieurs types de paragraphes sur votre site. Pour l'instant, saisissez simplement un ou deux paragraphes de texte dans votre champ Corps de texte.

Enregistrez votre article et affichez la page comme n'importe quel visiteur la verrait.

À ce stade, le nouveau corps utilisant des paragraphes ne semble pas différent d'un article utilisant le champ Corps par défaut. Avec les paragraphes en place, cependant, nous pourrons bientôt permettre à nos créateurs de contenu d'ajouter des éléments supplémentaires au contenu sans avoir à savoir comment le styliser correctement.

Partie #4. Ajouter votre CSS aux paragraphes

Une grande partie de ce qui rend les paragraphes si utiles est que nous pouvons écrire du CSS pour des éléments de contenu spécifiques afin que les créateurs de contenu n'aient pas à essayer de styliser manuellement autant de ces éléments eux-mêmes à l'aide de l'éditeur WYSIWYG ou du CSS en ligne. Cela signifie que nous personnaliserons le thème de notre site pour que ces éléments apparaissent exactement comme nous le souhaitons.

Dans de nombreux cas réels, vous travaillerez probablement avec votre propre thème ou sous-thème personnalisé, auquel cas vous pourrez le modifier librement. Pour ce tutoriel, nous allons créer un sous-thème rapide et facile du thème Bartik par défaut afin que nous puissions suivre les meilleures pratiques et ajouter notre propre CSS sans éditer le Bartik lui-même. (Nous évitons de modifier directement Bartik, ou tout autre thème central ou contribué, car si nous le faisons, puis appliquons ultérieurement une mise à jour publiée à ce thème, nos propres modifications seront perdues.) Si vous n'êtes pas familier avec la création de sous-thèmes, ce n'est pas grave. Nous ne creusons pas le processus de manière approfondie, mais créons plutôt une copie directe du thème, auquel nous appliquerons ensuite quelques légères modifications. C'est un processus facile.

• Pour créer un sous-thème, vous devez d'abord accéder au serveur sur lequel votre site est hébergé et naviguer jusqu'au répertoire racine de votre site.
• Une fois là-bas, ouvrez le répertoire "thèmes". C'est là que tous les thèmes et sous-thèmes personnalisés et contribués sont placés. Dans ce répertoire "thèmes", créez un nouveau dossier appelé "custombartik" et naviguez dans ce nouveau répertoire.

Nous devons maintenant ajouter quelques fichiers à ce nouveau répertoire. Le premier sera le fichier d'informations du thème. Ouvrez n'importe quel logiciel d'édition de code que vous utilisez pour le développement Web. Ces fichiers d'informations nécessitent plusieurs informations : le nom du projet (le nom de notre thème), le type de projet (« thème » dans ce cas), le nom machine du thème de base s'il s'agit d'un sous-thème (comme le nôtre est), une courte description et la version majeure de Drupal (7.x, 8.x, etc.) pour laquelle le thème est construit. Nous entrerons ces informations dans le formulaire suivant (tapez tout exactement comme vous le voyez):

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

Assurez-vous que le nom du thème de base "bartik" reste sans majuscule - c'est le nom lisible par machine sensible à la casse dont nous avons besoin. Une fois ces informations saisies, enregistrez le fichier sous « custombartik.info.yml ». Il est important que vous l'enregistriez avec exactement le même nom que le dossier que vous avez créé suivi de ".info.yml".

Nous devons maintenant créer le fichier de bibliothèques de notre thème, où nous indiquerons à Drupal où trouver le CSS du thème et de quelle version du thème il s'agit. Plus d'informations peuvent être fournies, mais c'est tout ce dont nous avons besoin pour nos besoins.

• Ouvrez un nouveau fichier. Dans ce fichier, faites très attention aux indentations ici. Chaque indentation doit être une tabulation à deux espaces.
• Saisissez les informations suivantes exactement telles qu'elles apparaissent :

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

• Enregistrez ce fichier sous « custombartik.libraries.yml ». Ce fichier indique essentiellement au site Web qu'il s'agit de la version 0.1 du thème (nous aurions pu lui donner n'importe quel numéro de version) et qu'il y aura une feuille de style située dans notre répertoire de thème ("custombartik") à css/style.css.

Nous devons maintenant revenir à notre fichier d'informations pour dire à Drupal d'utiliser les informations sous le conteneur "global-css" pour trouver notre feuille de style.

• Ouvrez votre fichier custombartik.info.yml, ajoutez une ligne vide sous votre ligne "core: 8.x", puis ajoutez la ligne d'informations suivante, en conservant à nouveau l'indentation exactement telle qu'elle apparaît ci-dessous :

 libraries:  - custombartik/global-css

L'ensemble du fichier devrait maintenant ressembler à ceci :

 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

À ce stade, nous sommes prêts à ajouter ces deux fichiers à notre thème.

• Téléchargez ou copiez vos fichiers custombartik.info.yml et custombartik.libraries.yml dans votre dossier custombartik.
• Ajoutez maintenant un dossier appelé "css" dans votre dossier custombartik.
• Allez-y et créez un fichier vierge appelé "style.css" et téléchargez-le dans ce répertoire. Ce sera notre feuille de style.
• Cependant, avant de créer notre feuille de style, accédez à la page "Apparence" de votre site Web.
• Faites défiler vers le bas de la page, et sous la section "Thème désinstallé", vous devriez voir votre thème Bartik personnalisé. Si vous ne le voyez pas, assurez-vous que votre dossier custombartik et tous ses fichiers sont présents dans le dossier des thèmes du système de fichiers de votre site.
• Cliquez sur "Installer et définir par défaut" sous votre thème personnalisé afin que votre site commence à utiliser votre thème.
• Une fois cela fait, accédez à votre page d'accueil, et elle devrait ressembler presque exactement au thème Bartik par défaut de Drupal, à l'exception que vous verrez probablement une icône d'image cassée à la place du logo Drupal. Le thème ressemble à Bartik car ce que nous avons créé est un sous-thème de Bartik sans personnalisation encore en place. Si votre site ne ressemble pas à Bartik, et surtout s'il ressemble à du HTML simple sans style CSS, revenez à vos deux fichiers .yml et assurez-vous qu'ils ressemblent exactement à ceux imprimés ci-dessus.

Enfin, pour réparer l'image du logo cassée, nous copierons le logo directement de Bartik dans notre sous-thème. C'est OK parce que nous ne changeons rien dans Bartik.

• Accédez au répertoire racine de votre site et accédez à core/themes/bartik. Ici, vous verrez un fichier appelé "logo.svg".
• Copiez ce fichier dans votre sous-thème (le répertoire « custombartik »).
• Sur votre site Web, accédez à Configuration > Performances, puis cliquez sur "Effacer tous les caches". Maintenant, le logo devrait apparaître sur votre site.

Partie #5. Styliser vos champs de paragraphes

Maintenant que nous avons un sous-thème que nous pouvons modifier en toute sécurité, nous pouvons commencer à définir des règles de style pour les éléments de notre contenu contrôlés par Paragraphs. Avant de le faire, nous devons créer un nouveau type de paragraphes qui nécessite des règles de style spéciales. Nous suivrons notre exemple d'avoir un champ qui insère une image centrée au milieu d'un article.

• Accédez à Structure > Types de paragraphes.
• Cliquez sur "Ajouter un type de paragraphes".
• Nous allons définir l'étiquette de celle-ci sur "Image centrée".
• Cliquez sur "Enregistrer et gérer les champs".
• Sur la page suivante, cliquez sur "Ajouter un champ" et sélectionnez "Image" sous "Ajouter un nouveau champ".
• Nous étiqueterons également ce champ "Image centrée".
• Cliquez sur "Enregistrer et continuer".
• Sur la page suivante, nous pouvons conserver toutes les valeurs par défaut, alors cliquez sur "Enregistrer les paramètres du champ".
• Ensuite, sur la page "Paramètres d'image centrée pour l'image centrée", nous ajouterons quelques restrictions simples. Définissez la résolution d'image maximale sur 650x450 et la résolution minimale sur 50x50. Définissez la taille de téléchargement maximale sur 1 Mo, puis cliquez sur "Enregistrer les paramètres". Ces paramètres spécifiques ne sont pas nécessaires au bon fonctionnement du type Paragraphes ; nous les incluons simplement pour imiter un scénario du monde réel.

• Cliquez maintenant sur l'onglet "Gérer l'affichage", définissez l'étiquette de l'image centrée sur "Masqué", puis cliquez sur "Enregistrer".

À ce stade, nous devons ajouter ce type de paragraphes au champ Paragraphes que nous avons dans notre type de contenu Article.

• Accédez à Structure > Types de contenu.
• Cliquez sur "Gérer les champs" à côté de "Article".

Vous pourriez être tenté de cliquer sur "Ajouter un champ" ici pour notre nouveau type de paragraphes "Image centrée", mais rappelez-vous que cela va être mélangé avec notre champ Corps personnalisé. Ainsi, à la place, nous ajouterons l'image centrée au champ Corps que nous avons créé.

• Cliquez sur "Modifier" à côté de "Corps" et faites défiler jusqu'au bas de la page.
• Ici, vous verrez "Image centrée" disponible sous notre type de paragraphes "Corps du texte".
• Cochez la case à côté de "Image centrée" pour la rendre disponible dans ce champ et enregistrez vos paramètres.

Nous allons maintenant ajouter une image en utilisant ce champ.

• Accédez à votre page de contenu et modifiez votre article "Comment se faire 100 amis".
• Imaginons que nous voulions ajouter une image centrée quelque part au milieu de notre article. Sous le champ Corps de texte, vous verrez à nouveau le bouton "Ajouter un corps de texte" pour ajouter un autre champ Corps de texte dans ce champ Corps. Cependant, si vous cliquez sur la flèche déroulante à côté de ce bouton, vous verrez que "l'image centrée" est désormais également disponible. Cliquez sur ce bouton et choisissez un fichier image à télécharger ici. Ensuite, fournissez un texte alternatif, car cela est nécessaire.

Nous avons maintenant ajouté l'image à notre contenu, mais elle est actuellement placée sous tout le texte. C'est ici que nous utiliserons un champ supplémentaire Corps de texte.

• Cliquez sur "Ajouter un corps de texte". Nous avons maintenant, de haut en bas, un champ de corps de texte, une image centrée et un autre champ de corps de texte. Notez que, bien que vous ne devriez pas avoir besoin de le faire à ce stade, vous pouvez les déplacer librement via les flèches glisser-déposer en haut à gauche des champs Paragraphes individuels. Pour que l'image centrée apparaisse en sandwich entre le texte de l'article, accédez simplement au premier champ de texte Corps, sélectionnez le texte que vous souhaitez voir apparaître après l'image et coupez ce texte du champ. Ensuite, faites défiler vers le bas et collez ce texte coupé dans le deuxième champ de texte Corps (après votre image).
• Cliquez sur "Enregistrer".

Lorsque vous affichez votre article maintenant, il n'aura toujours pas l'air tout à fait correct. Comme nous n'avons pas encore ajouté de règles de style à notre thème, l'image est susceptible d'être flottante à gauche (comme c'est le cas par défaut), plutôt que centrée. Cependant, il doit apparaître après le texte du premier champ Corps de texte et avant le texte du second champ Corps de texte. Nous avons maintenant un article sur lequel nous pouvons tester certaines règles de style personnalisées.

Partie #6. Contrôler les paragraphes avec CSS

Nous allons maintenant passer à notre sous-thème personnalisé pour commencer à styliser la sortie des champs Paragraphes que nous avons créés. Pour l'instant, nous allons cibler spécifiquement le champ "Image centrée", plutôt que le champ Paragraphes englobant du type de contenu. Nous faisons cela parce que nous voulons que ce champ soit centré à tout moment, peu importe où il se trouve. Ainsi, en définissant des règles directement pour "l'image centrée", nous évitons de définir plusieurs règles inutiles pour plusieurs contextes.

Nous devons cependant cibler la classe "nœud", car il y aura, par défaut, un certain style pour ce champ ciblé sous la classe "nœud". Nous devons donc outrepasser ces règles.

• Ouvrez la feuille de style de votre sous-thème "custombartik" à custombartik/css/style.css.
• Le fichier devrait toujours être vide, mais nous allons maintenant commencer à y ajouter des règles. Nous allons garder les choses simples pour l'instant. Ajoutez les lignes de code suivantes à votre feuille de style :

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

Avec le premier ensemble de règles, nous centrons simplement l'image horizontalement dans sa classe de champ et nous nous assurons qu'aucun texte ou quoi que ce soit d'autre ne flotte à côté. Le deuxième ensemble de règles n'est pas strictement nécessaire, mais il s'agit d'un code commun pour s'assurer que les images ne finissent pas plus grandes qu'elles ne le devraient par rapport à la zone de contenu.

• Une fois que vous l'avez ajouté à votre fichier style.css, enregistrez vos modifications (à partir de maintenant, toute référence à l'enregistrement des modifications dans votre sous-thème suppose également le téléchargement ou la copie des fichiers sur votre serveur si vous n'éditez pas directement sur le serveur sur où se trouve votre site de test).
• Ensuite, sur votre site, accédez à Configuration> Performances, puis cliquez sur "Effacer tous les caches" pour charger les changements de thème sur votre site.
• Revenez à l'article sur lequel vous avez ajouté l'image à centrer (ou actualisez la page si vous l'avez déjà ouverte).

L'image placée à travers le type de paragraphes "Image centrée" doit maintenant être centrée sans texte flottant de part et d'autre de celle-ci. Nous aimerions peut-être ajouter d'autres styles, mais dans le cadre de ce didacticiel, nous avons fait ce que nous voulions faire pour le moment : assurez-vous que la sortie de ce champ est strictement contrôlée par CSS afin que les utilisateurs qui ajoutent le contenu n'a pas à styliser quoi que ce soit lui-même à l'aide de l'éditeur WYSIWYG ou d'autres méthodes de style en ligne.

Partie #7. Paragraphes avec plusieurs champs

Nous pouvons également créer des types de paragraphes qui eux-mêmes sont constitués de plusieurs champs.

Par exemple, au lieu d'un type "Image centrée", nous pouvons créer un type "Image centrée avec légende", qui consisterait en un champ de téléchargement d'image et un champ de texte d'accompagnement pour tout élément unique de ce type. Cela nous aide également à supprimer le fardeau de la mise en page de ceux qui ajoutent du contenu au site afin que nous puissions contrôler l'affichage du contenu au niveau du thème.

Créons ce type "Image centrée avec légende" pour pratiquer le processus de création d'un type de paragraphes multi-champs. Comme vous vous en doutez, ce processus sera similaire à celui de la création d'un type à champ unique.

• Accédez à Structure > Types de paragraphes, puis cliquez sur "Ajouter un type de paragraphes".
• Étiquetez ce type "Image centrée avec légende" et cliquez sur "Enregistrer et gérer les champs".
• Cliquez sur "Ajouter un champ".

Étant donné que notre champ "Image centrée" créé précédemment correspond exactement à ce que nous voulons pour la partie image de notre nouveau type de paragraphes, au lieu de créer un nouveau champ, nous pouvons réutiliser le précédent. Donc, ne sélectionnez rien sous "Ajouter un nouveau champ" sur la page "Ajouter un champ".

• Sous "Réutiliser un champ existant", sélectionnez "Image : field_centered_image".
• Conservez l'étiquette "Image centrée" et cliquez sur "Enregistrer et continuer".
• Nous devons configurer nos paramètres pour les limites de taille de l'image sur la page suivante. Entrons à nouveau dans une résolution d'image maximale de 650x450 pixels, et minimale de 50x50 pixels. Définissez la taille de téléchargement maximale sur 1 Mo.
• Cliquez sur "Enregistrer les paramètres".

Nous allons maintenant ajouter un autre champ. Gardez à l'esprit que nous sommes toujours dans les paramètres de notre nouveau type de paragraphes, donc une fois que nous aurons ajouté ce deuxième champ, "Image centrée avec légende" sera un type avec deux champs.

• Cliquez sur "Ajouter un champ" et ajoutez un nouveau champ de type "Texte (ordinaire)".
• Nommez ce champ "Légende".
• Cliquez sur "Enregistrer et continuer".
• Certaines légendes plus longues devront peut-être dépasser la limite par défaut de 255 caractères. Par conséquent, modifiez la longueur maximale de ce champ à 500. Conservez le nombre de valeurs autorisé sur "Limité" et 1, et enregistrez les paramètres.
• Les paramètres par défaut des sous-titres suivants sont tous corrects, alors enregistrez également les paramètres sur cette page.

Maintenant, notre nouveau type Paragraphes a tous les champs dont il a besoin, alors contrôlons l'affichage.

• Cliquez sur l'onglet « Gérer l'affichage » afin que nous puissions supprimer les étiquettes de champ, qui sont inutiles dans ce cas.
• Sélectionnez "Masqué" sous la colonne "Libellé" pour les deux champs, puis cliquez sur "Enregistrer".
• Si les deux champs étaient dans le désordre, nous les réorganiserions de sorte que le champ de légende vienne après le champ d'image, mais puisque nous avons ajouté le champ de légende en dernier, il devrait déjà être positionné après le champ d'image, comme nous le souhaitons .

Nous allons maintenant ajouter le nouveau type à notre type de contenu Article.

• Accédez à Structure > Types de contenu, puis cliquez sur "Gérer les champs" pour l'article. Comme ce fut le cas lorsque nous avons ajouté notre premier type de paragraphes "Image centrée" au type de contenu, nous ajouterons ce nouveau type de paragraphes dans notre champ Corps personnalisé plutôt que d'ajouter un nouveau champ.
• Sur la page "Gérer les champs" pour l'article, cliquez sur "Modifier" pour le corps.
• Faites défiler vers le bas de la page et cochez la case à côté de "Image centrée avec légende" pour rendre ce type disponible dans ce champ Corps.
• Cliquez sur "Enregistrer les paramètres".
• Désormais, ce nouveau type de paragraphes sera disponible pour ceux qui ajoutent des articles au site.

Continuons et créons un nouvel article en utilisant ce champ, puis nous ajouterons notre style pour contrôler son affichage.

• Accédez à la page Contenu, cliquez sur "Ajouter du contenu", puis cliquez sur "Article".
• Appelons cet article "Apprendre à jouer d'un instrument peut améliorer votre vie".
• Cliquez sur "Ajouter un corps de texte" pour commencer à ajouter du texte à l'article. Saisissez un ou deux paragraphes de texte dans ce champ.
• Ensuite, sous le champ Corps de texte, cliquez sur la flèche déroulante à côté de "Ajouter un corps de texte" et sélectionnez la nouvelle option "Ajouter une image centrée avec légende". Notez que nous sommes maintenant présentés avec deux champs pour la saisie de données, comme nous devrions nous y attendre : les champs « Image centrée » et « Légende » qui appartiennent à ce type de paragraphes.
• Téléchargez n'importe quelle image dans le champ d'image et fournissez un texte alternatif.
• Tapez ensuite "La Les Paul est l'une des guitares les plus légendaires du rock and roll".

Nous allons maintenant ajouter une partie du reste du texte de l'article après l'image et la légende.

• Sous l'image et la légende Type de paragraphes, cliquez à nouveau sur "Ajouter un corps de texte".
• Ajoutez un autre paragraphe ou deux de texte.
• Enfin, cliquez sur "Enregistrer et publier".

Actuellement, l'affichage de notre "Image centrée et légende" devrait être à moitié correct. Puisque nous avons réutilisé le champ précédent "Image centrée", l'image elle-même devrait déjà être centrée comme elle l'était pour le champ précédent qui consistait uniquement en une image à centrer. Le texte de la légende, bien sûr, n'a pas encore de règles CSS, il apparaîtra donc aligné à gauche et ressemblera au texte du reste de l'article. Nous devons donc ajouter quelques règles à notre thème pour styliser ce texte de légende.

Cette fois, lors de l'écriture de notre CSS, nous ciblerons l'ensemble du type de paragraphes "Image centrée avec légende", puis nous explorerons le champ de légende au sein de cette classe, plutôt que de cibler le texte de la légende indépendamment de son conteneur, comme nous l'avons fait précédemment avec le image centrée. Nous adopterons cette approche car nous voudrons peut-être réutiliser ce champ de texte de légende ailleurs, et il est probable que dans certains cas, nous voudrons qu'il soit stylé différemment (comme être aligné à gauche ou à droite plutôt que centré) de la façon dont il est dans ce type de paragraphe particulier.

Nous centrerons notre texte de légende car son image correspondante est centrée, et pour fournir une différenciation visuelle entre ce texte et le texte de l'article, nous le mettrons en gras (les italiques fourniraient également cet effet).

• Ajoutez les lignes de code suivantes à votre feuille de style et enregistrez vos modifications :

{codecitation}.paragraph--type--centered-image-with-caption .field--name-field-caption { font-weight: bold; aligner le texte : centrer ; }{cocitation}

• Ensuite, pour voir nos modifications sur le site, accédez à Configuration > Performances et effacez tous les caches.
• Revenez en arrière et actualisez l'article récemment créé, et vous devriez voir les nouvelles règles de style en vigueur. Le texte de la légende doit maintenant être en gras et centré sous l'image.

Nous pouvons bien sûr appliquer un style à ce type de paragraphes dans son ensemble. L'une des raisons de le faire serait de séparer l'élément image/légende du texte qui l'entoure et d'indiquer visuellement clairement qu'il doit être considéré comme une seule unité.

• Ajoutez le code suivant à votre feuille de style et enregistrez vos modifications :

{codecitation}.paragraph--type--centered-image-with-caption { border: 2px gray solid; marge : 4px 0 ; rembourrage : 4px ; }

Maintenant, effacez à nouveau le cache de votre site et actualisez la page de l'article. L'image et la légende doivent se ressembler pour la plupart ; cependant, l'ensemble de l'image/de la légende est maintenant entouré d'une bordure grise et comporte de petites marges en haut et en bas. Nous pourrions faire plus pour améliorer l'esthétique ici (et la bordure n'est probablement pas nécessaire), mais cela démontre notre capacité à fournir un style pour les composants individuels des types de paragraphes ainsi que pour les types de paragraphes dans leur ensemble.

Désormais, si un utilisateur non technique ajoute du contenu au site et souhaite inclure une grande image centrée avec une légende, il lui suffit de sélectionner ce champ Paragraphes lors de la modification de l'article, de télécharger une image et de saisir le texte dans le champ de légende. La mise en forme sera automatiquement appliquée.

Partie #8. Utiliser des nœuds entiers dans les paragraphes

À ce stade, nous avons vu quelques exemples des utilisations de base des paragraphes. Nous allons maintenant aborder un exemple un peu plus avancé : utiliser des paragraphes pour placer un nœud entier dans le corps d'un élément de contenu. Un cas d'utilisation pour cela serait de placer une information complémentaire connexe mais autonome dans l'un de vos articles (similaire à quelque chose comme une section "Le saviez-vous?" que vous pourriez voir accompagner un article de magazine).

Pour notre exemple, nous allons imaginer que nous voulons avoir la possibilité d'ajouter ce que nous appellerons des "boîtes d'informations" à nos articles, et nous le ferons en plaçant un court élément de contenu intitulé "Une courte histoire de la harpe " dans notre article créé précédemment sur l'apprentissage d'un instrument.

Tout d'abord, nous devons créer un type de contenu pour ces "boîtes d'informations".

• Accédez à Structure > Types de contenu, puis cliquez sur « Ajouter un type de contenu ».
• Nous donnerons à ce type de contenu le nom "Boîte d'informations".
• Pour la description, écrivez « Brèves informations utilisées pour compléter les articles ».
• 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.

• Accédez à la page Personnes de votre site et cliquez sur l'onglet "Autorisations".
• Faites défiler vers le bas jusqu'à ce que vous voyiez la section "Autorisations de type de paragraphes". Sous cet en-tête, recherchez "Corps du texte : Afficher le contenu" et cochez les cases pour Utilisateur anonyme et Utilisateur authentifié.
• Faites de même pour l'autorisation "Afficher le contenu" de tous les autres types de paragraphes que nous avons créés : Image centrée, Image centrée avec légende, Zone d'informations et Avantages et inconvénients.
• Cliquez sur "Enregistrer les autorisations".

À ce stade, tous les utilisateurs peuvent afficher tout le contenu des paragraphes. N'hésitez pas à vous déconnecter et à consulter le site en tant que visiteur anonyme pour confirmer.

Maintenant, pour créer un nouveau rôle pour ceux qui ajouteront et modifieront du contenu sur notre site.

• Accédez à Personnes, cliquez sur l'onglet "Rôles", puis cliquez sur "Ajouter un rôle".
• Appelez ce rôle "Créateur de contenu".
• De retour sur la page Rôles, cliquez sur la flèche déroulante à côté du rôle de créateur de contenu et sélectionnez "Modifier les autorisations".
• Il y a pas mal d'autorisations que nous devrons accorder aux utilisateurs de ce rôle. Certains d'entre eux ne sont pas liés aux paragraphes, mais nous les incluons quand même pour imiter un scénario du monde réel. De plus, il sera difficile de tester le nouveau rôle de manière fiable s'il ne dispose pas de toutes les autorisations dont il disposerait en pratique. Notez également que nous accordons ces autorisations en supposant que nos créateurs de contenu travaillent tous en interne. Autrement dit, nous n'avons pas un grand nombre d'utilisateurs techniquement authentifiés mais toujours pseudo-anonymes créant du contenu sur notre site, nous pensons donc que nous pouvons en toute sécurité accorder à ces utilisateurs la permission de faire des choses comme utiliser le format de texte Full HTML, qui dans d'autres cas entraînerait des problèmes de sécurité.

Voici la liste des autorisations que le rôle de créateur de contenu doit recevoir :

Commenter

• Modifier ses propres commentaires
• Poster des commentaires
• Ignorer l'approbation des commentaires
• Voir les commentaires

Contact

• Voir le formulaire de contact sur tout le site
• Utiliser les formulaires de contact personnels des utilisateurs

Filtre

• Utiliser le format de texte HTML de base
• Utiliser le format de texte HTML complet
• Utiliser le format de texte HTML restreint

Nœud

• Accéder à la page d'aperçu du contenu
• Administrer le contenu
• Voir son propre contenu non publié
• Annuler toutes les révisions
• Voir toutes les révisions
• Voir son propre contenu non publié
• Article : Modifier n'importe quel contenu
• Article : Modifier son propre contenu
• Article : Annuler les révisions
• Article : Afficher les révisions
• Boîte d'informations : Créer un nouveau contenu
• Zone d'informations : modifier n'importe quel contenu
• Zone d'informations : Modifier son propre contenu
• Zone d'informations : annuler les révisions
• Zone d'informations : Afficher les révisions

Autorisations de type de paragraphes

Accordez toutes les autorisations de cette section, à l'exception de "Contourner le contrôle d'accès au contenu de type paragraphes".

Chercher

• Utiliser la recherche avancée
• Utiliser la recherche

Système

• Utiliser les pages d'administration et l'aide
• Utiliser le site en mode maintenance
• Voir le thème d'administration

Taxonomie

• Modifier les termes dans les balises

Barre d'outils

• Utiliser la barre d'outils d'administration

Utilisateur

• Afficher les informations de l'utilisateur

Assurez-vous de cliquer sur "Enregistrer les autorisations" lorsque vous avez terminé.

Quelques notes sur certaines des autorisations que nous avons accordées et non accordées ici : nous n'avons pas accordé l'autorisation d'administrer les types de paragraphes, car nous ne voulons pas qu'ils créent de nouveaux types de paragraphes ou modifient le fonctionnement des types de paragraphes existants. Ils entreront simplement des informations en utilisant les types de paragraphes que nous, les développeurs, avons créés pour eux. De plus, bien que dans certains cas, il soit sage d'éviter d'accorder à des rôles non administratifs la possibilité de supprimer du contenu (dans la plupart des cas, il suffit qu'ils puissent annuler la publication du contenu, et la suppression du contenu le rend irrécupérable), nous devons leur donner la permission pour supprimer le contenu des types de paragraphes sous "Autorisations de type de paragraphes". Cela est nécessaire car s'ils ne sont pas en mesure de supprimer ce type de contenu, et s'ils cliquent accidentellement pour ajouter un contenu via le type de paragraphes dont ils n'ont pas réellement besoin dans un article donné, il n'y aura aucun moyen pour eux de supprimer cette unité de contenu de l'article. Cela reviendrait à interdire l'utilisation de la touche Retour arrière.

Pour tester nos nouvelles autorisations, nous allons créer un nouvel utilisateur du rôle de créateur de contenu et passer par le processus d'ajout d'un nouvel article en tant que cet utilisateur.

• Accédez à Personnes et cliquez sur "Ajouter un utilisateur".
• Créez un utilisateur nommé Mary (vous pouvez ignorer l'adresse e-mail), avec un mot de passe dont vous vous souviendrez facilement.
• Assurez-vous que le statut de l'utilisateur est marqué comme "Actif" et, surtout, assurez-vous de vérifier le rôle "Créateur de contenu" pour cet utilisateur.
• Cliquez ensuite sur "Créer un nouveau compte".
• Déconnectez-vous et reconnectez-vous en tant que Mary. Si les autorisations ont été attribuées correctement, vous devriez avoir accès à la barre d'outils d'administration.
• Cliquez sur "Gérer" dans la barre d'outils si vous ne voyez pas les liens administratifs ("Contenu", "Structure", etc.).
• Accédez ensuite à Contenu et ajoutez un nouveau contenu de type Article. Oui
• ous pouvez intituler cet article "Le brocoli est excellent pour vous".
• Ajoutez un champ de texte Corps et saisissez du texte.
• Vous devez ensuite parcourir et essayer d'ajouter du contenu de chaque type de paragraphe que nous avons créé : Image centrée, Image centrée avec légende, Zone d'informations et Avantages et inconvénients.
• Après cela, enregistrez l'article et affichez-le. Ce processus complet devrait être le même que lorsque nous l'avons fait en tant qu'administrateur de site, et vous devriez alors pouvoir voir tout le contenu sans problème.

Si vous n'avez pas la possibilité d'en ajouter un ou plusieurs, ou si vous rencontrez d'autres problèmes en essayant de le faire, vous avez probablement manqué une ou plusieurs des autorisations nécessaires lors de leur octroi au rôle de créateur de contenu. Revenez aux autorisations du créateur de contenu et assurez-vous de lui avoir accordé toutes les autorisations répertoriées ci-dessus, en particulier celles figurant sous l'en-tête "Paragraphs Type Permissions".

Conclusion du didacticiel sur les paragraphes

Une fois que vous avez confirmé que vous pouvez créer et afficher du contenu en utilisant le contenu de Paragraphs en tant que créateur de contenu, vous avez terminé ce didacticiel. À ce stade, vous devriez comprendre pourquoi et comment utiliser le module Paragraphes.

Pour récapituler, l'utilité de ce module réside dans sa capacité à définir des composants de contenu spéciaux dans l'article, tels que des encadrés d'informations supplémentaires et des images centrées avec des légendes, sans obliger les créateurs de contenu à essayer de styliser les choses par eux-mêmes.

Avec Paragraphs, il leur est simplement demandé de fournir le contenu de ces parties de nos articles, et nous, en tant que développeurs, pouvons écrire des règles à l'échelle du site (en utilisant CSS) sur la façon dont ce contenu doit être affiché. Cela facilite le processus de création de contenu pour les utilisateurs non techniques et rend l'apparence de ce contenu plus cohérente pour les utilisateurs techniques et non techniques.