Que sont les modes d'affichage dans Drupal 8

Drupal est bien connu pour sa flexibilité dans la gestion et la présentation du contenu. Les modes d'affichage Drupal vous permettent de rendre (afficher) une ou plusieurs entités Drupal (comme des nœuds) d'une certaine manière, en fonction d'un contexte particulier.

Ce didacticiel démontrera l'utilisation des modes d'affichage Drupal avec un exemple. Nous installerons et utiliserons également les modules Field Group et Display Suite.

Commençons!

Étape 1. Installer les modules requis

• Ouvrez l'application terminal et placez le curseur à la racine de l'installation Drupal.

• Taper:

composer nécessite "drupal//field_group: ^ 3.0"

compositeur nécessite drupal/ds

• Cliquez sur Étendre .

• Activez Display Suite et Field Group .

• Cliquez sur Installer .

Le système vous demandera d'activer le module Layout Discovery.

• Cliquez sur Continuer .

Aucun autre module n'est requis.

Étape 2. Le type de contenu

Pour les besoins de ce didacticiel, nous allons créer un type de contenu appelé "Personne célèbre" avec les champs détaillés dans le tableau ci-dessous. Suivez le même type de contenu ou créez-en un autre, comme « Auteur », « Patient » ou même un autre type d'entité comme « Membre », par exemple. N'oubliez pas que les modes d'affichage peuvent être appliqués à toutes sortes d'entités, pas seulement aux nœuds .

Les champs:

• Né

• Est mort

• Connu pour

seront regroupés dans un groupe de champs appelé Données personnelles.

Étape 3. Créer le groupe de champs

• Cliquez sur Gérer l'affichage > Ajouter un groupe de champs .
• Sélectionnez Fieldset dans la liste déroulante.
• Ajoutez une étiquette appropriée.
• Cliquez sur Créer un groupe .

• Faites glisser le jeu de champs sous le champ Image.

• Masquez l'étiquette de l'image.

• Regroupez les champs à l'intérieur de l'ensemble de champs en les indentant.

• Faites en sorte que les étiquettes dans le jeu de champs soient en ligne .

• Cliquez sur Enregistrer .

Notez que nous configurons déjà l'un des deux modes d'affichage actifs dans Drupal ( Default et Teaser ).

Le mode d'affichage par défaut affiche le nœud entier, tandis que le mode d'affichage Teaser affiche l'affichage teaser des articles sur la page d'accueil de Drupal.

Étape 4. Créer du contenu

• Cliquez sur Contenu > Ajouter du contenu > Personne célèbre

• Créer 4 à 5 nœuds

Étape #5. Créer des modes d'affichage personnalisés

• Cliquez sur Structure > Types de contenu .

• Sélectionnez Gérer l'affichage pour le type de contenu "Personne célèbre" .

• Faites défiler vers le bas et cliquez sur Paramètres d'affichage personnalisés .

• Cliquez sur Gérer les modes d'affichage .

Ici, nous pouvons configurer les modes d'affichage existants sur différents types d'entités ( bundles ). Nous pouvons également créer des modes d'affichage personnalisés pour répondre à nos besoins en matière de conception ou d'informations.

• Cliquez sur Ajouter un mode d'affichage .

• Cliquez sur Contenu .

• Donnez au mode d'affichage un nom propre.

• Cliquez sur Enregistrer .

• Créez 2 modes d'affichage supplémentaires.

J'ai utilisé ces noms : Mode d'affichage Lifework - Mode d'affichage Trivia

• Cliquez sur Structure > Types de contenu .

• Sélectionnez Personne célèbre > Gérer l'affichage .

• Faites défiler vers le bas et cliquez à nouveau sur Paramètres d'affichage personnalisés .

• Cochez les 3 modes d'affichage que vous venez de créer.

• Cliquez sur Enregistrer .

• Cliquez sur le mode d'affichage Données personnelles .

• Faites défiler vers le bas et sélectionnez Disposition à deux colonnes (sous les options Display Suite) dans la liste déroulante.

• Cliquez sur Enregistrer .

• Cliquez à nouveau sur Enregistrer (éventuellement) pour déplacer les champs vers la nouvelle colonne.

• Faites glisser le jeu de champs Données personnelles en haut de la colonne de gauche.

• Placez les trois champs correspondants en conséquence.

• Placez l'image dans la colonne de droite.

• Changez le style d'image en moyen.

• Cliquez sur Mettre à jour .

• Faites glisser tous les autres champs vers la section Désactivé .

• Faites défiler vers le bas et cliquez sur Enregistrer .

• Répétez le processus avec les deux autres modes d'affichage. À l'aide des options de mise en page :

  • Largeur égale à trois colonnes

  • Trois colonnes 25/50/25

Étape #6. Créer une vue

• Cliquez sur Structure > Vues > Ajouter une vue .

• Donnez un nom propre à la vue.

• Sélectionnez Contenu de type Personne célèbre .

• Cochez Créer un bloc .

• Modifiez le nombre d' éléments par bloc à 1.

• Cochez Utiliser un téléavertisseur .

• Cliquez sur Enregistrer et modifier .

• Cliquez sur l'option Champs sous la section Format .

• Sélectionnez Contenu .

• Cliquez sur Appliquer .

• Sélectionnez le premier mode d'affichage.

• Cliquez sur Appliquer .

• Cliquez sur Enregistrer .

• Cliquez sur la section Avancé à droite de l' interface utilisateur des vues .

• Cliquez sur Utiliser AJAX : Non .

• Cochez Utiliser AJAX .

• Cliquez sur Appliquer .

• Cliquez sur Enregistrer .

• Créez 2 autres blocs avec le même processus. Le seul paramètre qui différera sera le mode d'affichage dans la section Format .

Étape #7. Placer les blocs

• Créez un article avec juste le titre.

• Cliquez sur Enregistrer .

• Cliquez sur Structure > Disposition des blocs .

• Faites défiler jusqu'à la section Contenu .

• Cliquez sur Placer le bloc .

• Recherchez les 3 blocs.

• Cliquez sur Placer le bloc .

• Décochez Afficher le titre .

• Limitez le bloc à l'article que nous venons de créer.

• Cliquez sur Enregistrer le bloc .

• Répétez le processus avec les 2 autres blocs.

• Réorganisez les blocs sous le titre.

• Cliquez sur Enregistrer les blocs .

Rendez-vous sur l'article et jetez un œil.

Cool Drupal ! Toutes nos félicitations!

Veuillez nous dire comment vous prévoyez d'utiliser cette fonctionnalité utile de Drupal. Merci d'avoir lu!