Création de formateurs de champ personnalisés dans Drupal 8

Les plats clés

• La création d'un formateur de champ personnalisé dans Drupal 8 implique de définir une nouvelle classe de format dans le répertoire SRC / Plugin / Field / FieldFormatter d'un module personnalisé, s'étendant du plugin d'image par défaut.
• La nouvelle classe de format doit remplacer la méthode ViewElements () pour renvoyer un tableau de rendu de données de champ, en remplaçant le thème Image_Formatter par défaut par un thème personnalisé.
• Un nouveau thème, image_title_caption_formatter, est créé dans le fichier .module du module, avec les mêmes variables passées que dans le thème Image_Formatter par défaut.
• Le formateur de champ personnalisé peut être appliqué à un champ de Drupal 8 via l'onglet «Gérer l'affichage» du type de contenu, en sélectionnant le formateur personnalisé dans la liste déroulante «Format».

Veuillez noter qu'en raison du processus de développement Drupal 8 a été en cours au moment de la rédaction, certaines parties du code pourraient être obsolètes. Jetez un œil à ce référentiel dans lequel j'essaie de mettre à jour l'exemple de code et de le faire fonctionner avec la dernière version de Drupal 8.

Avec l'introduction de plugins annotés, beaucoup de choses ont changé dans Drupal 8. Nous avons une approche plus rationalisée pour décrire et découvrir des fonctionnalités qui étendent le noyau. Avec de nombreux autres composants, l'ancienne API de champ (une partie de l'API d'entité plus grande et consolidée) est désormais basée sur les plugins.

Dans ce tutoriel, nous allons passer en définissant un formateur de champ personnalisé pour un champ existant (image). Ce que nous voulons réaliser, c'est permettre d'afficher une image avec une petite légende en dessous. Cette légende sera la valeur de titre attribuée à l'image si l'on existe.

Le code que nous écrivons ici peut être trouvé dans ce référentiel en tant que module image_title_caption. Mais voyons comment nous pouvons atteindre ce résultat final.

Le module Drupal

Commençons par créer un nouveau module personnalisé (image_title_caption) avec un seul fichier:

image_title_caption.info.yml:

name: Image title caption
type: module
description: Uses the image title field as a caption
core: 8.x
dependencies:
  - image

Rien de l'ordinaire ici. Nous pouvons même activer le module si nous le souhaitons.

le plugin

Dans Drupal 8, les formateurs de champ (comme les types de champs et les widgets eux-mêmes) sont des plugins. Les noyaux sont définis soit par les modules de base, ou peuvent être trouvés à l'intérieur de l'espace de noms DrupalcoreFieldPluginFieldFormatter. Et comme nous l'avons vu dans un article précédent dans lequel nous avons examiné les blocs personnalisés, les plugins vont à l'intérieur du src / plugin / dossier de notre module. Dans le cas des formateurs de champ, ce sera le répertoire SRC / Plugin / Field / FieldFormatter.

ci-dessous, vous pouvez voir notre propre classe de format:

src / plugin / field / fieldformatter / imagetitlecaption.php:

name: Image title caption
type: module
description: Uses the image title field as a caption
core: 8.x
dependencies:
  - image

C'est notre plugin. Rien d'autre. Au-dessus de la déclaration de classe, nous avons l'annotation @FieldFormatter à travers laquelle le plugin est découvert. Nous spécifions un ID de plugin (image_title_caption), l'étiquette et un tableau de types de champs avec lesquels ce formateur peut être utilisé. Dans notre cas, ce dernier ne contient que le type de champ d'image par défaut, mais nous pourrions prendre en charge davantage si nous le voulions, même les types de champ personnalisés. Les valeurs qui vont dans ce tableau sont des ID de plugin, donc si vous regardez le plugin de type de champ d'image, vous verrez que son ID est l'image.

La classe semble simple car nous étendons du plugin ImageFormatter par défaut défini par le module d'image de base. Pour notre objectif, tout ce que nous avons besoin pour remplacer la méthode ViewElements () qui est responsable du renvoi d'un tableau de rendu de nos données sur le terrain. Ce dernier peut être trouvé dans la liste des articles $ et peut être utilisé et préparé pour le rendu.

La première chose que nous faisons dans cette méthode est de s'assurer que nous appelons la méthode de la classe parent sur les articles et le stockons dans une variable. Cela préparera déjà l'image à être rendue comme si elle le ferait normalement.

Par défaut, le plugin ImageFormatter (le parent) utilise le thème Image_Formatter à l'intérieur du tableau de rendu pour sortir les valeurs de champ d'image. Ce que nous faisons ici, c'est que pour chaque élément, nous remplaçons ce thème par le nôtre: image_title_caption_formatter. Ensuite, nous renvoyons les éléments (Render Array) tout comme le parent.

Vous le remarquerez beaucoup dans Drupal 8: Nous obtenons une très bonne indication sur ce que nous devons faire des classes parentales que nous étendons. Et si vous me demandez, c'est bien mieux que de déterminer ce que fait un crochet ou une fonction magique.

le thème

Étant donné que le thème Image_Title_Caption_Formatter que nous avons spécifié ci-dessus est jusqu'à présent imaginaire, nous devons le créer. À l'intérieur du fichier .module de notre module, nous devons implémenter Hook_Theme:

image_title_caption.module:

<span><span><?php
</span></span><span>
</span><span><span>/**
</span></span><span><span> * <span>@file
</span></span></span><span><span> * Contains \Drupal\image_title_caption\Plugin\Field\FieldFormatter\ImageTitleCaption.
</span></span><span><span> */
</span></span><span>
</span><span><span>namespace Drupal<span>\image_title_caption\Plugin\Field\FieldFormatter</span>;
</span></span><span>
</span><span><span>use Drupal<span>\Core\Field\FieldItemListInterface</span>;
</span></span><span><span>use Drupal<span>\image\Plugin\Field\FieldFormatter\ImageFormatter</span>;
</span></span><span>
</span><span><span>/**
</span></span><span><span> * Plugin implementation of the 'image_title_caption' formatter.
</span></span><span><span> *
</span></span><span><span> * @FieldFormatter(
</span></span><span><span> *   id = "image_title_caption",
</span></span><span><span> *   label = @Translation("Image with caption from title"),
</span></span><span><span> *   field_types = <span>{
</span></span></span><span><span> *     "image"
</span></span><span><span> *   <span>}
</span></span></span><span><span> * )
</span></span><span><span> */
</span></span><span><span>class ImageTitleCaption extends ImageFormatter {
</span></span><span>
</span><span>  <span>/**
</span></span><span><span>   * <span>{@inheritdoc}
</span></span></span><span><span>   */
</span></span><span>  <span>public function viewElements(FieldItemListInterface $items) {
</span></span><span>    <span>$elements = <span>parent::</span>viewElements($items);
</span></span><span>    <span>foreach ($elements as &$element) {
</span></span><span>      <span>$element['#theme'] = 'image_title_caption_formatter';
</span></span><span>    <span>}
</span></span><span>
</span><span>    <span>return $elements;
</span></span><span>  <span>}
</span></span><span>
</span><span><span>}</span></span>

Cela devrait sembler familier car il est très similaire à Drupal 7. Veuillez noter les variables que nous transmettons à ce thème. Nous avons l'intention de remplacer le thème Image_Formatter par défaut, nous devons donc faire passer les mêmes variables ici. De plus, puisque le thème Image_Formatter est prétraité, nous devrons également créer un préprocesseur pour notre thème:

<span>/**
</span><span> * Implements hook_theme().
</span><span> */
</span><span>function image_title_caption_theme() {
</span>  <span>return array(
</span>    <span>'image_title_caption_formatter' => array(
</span>      <span>'variables' => array('item' => NULL, 'item_attributes' => NULL, 'url' => NULL, 'image_style' => NULL),
</span>    <span>),
</span>  <span>);
</span><span>}</span>

Dans ce préprocesseur, nous effectuons deux actions:

• Nous nous assurons que les variables transmises au fichier de modèle auront d'abord été prétraitées par le préprocesseur de thème Image_Formatter par défaut. C'est ainsi que toutes les variables sont exactement les mêmes et que l'image s'affiche comme il le serait normalement.
• Nous créons une nouvelle variable appelée légende qui contiendra la valeur désinfectée du titre de l'image.

Pour la désinfection, nous utilisons la classe de chaîne d'assistance statiquement. Nous sommes toujours à l'intérieur du fichier .module, nous ne pouvons donc pas l'injecter, mais nous devons l'utiliser en haut du fichier:

name: Image title caption
type: module
description: Uses the image title field as a caption
core: 8.x
dependencies:
  - image

Modèle

Enfin, nous devons créer un fichier de modèle pour notre nouveau thème:

Modèles / Image-Title-Caption-formatter.html.twig:

<span><span><?php
</span></span><span>
</span><span><span>/**
</span></span><span><span> * <span>@file
</span></span></span><span><span> * Contains \Drupal\image_title_caption\Plugin\Field\FieldFormatter\ImageTitleCaption.
</span></span><span><span> */
</span></span><span>
</span><span><span>namespace Drupal<span>\image_title_caption\Plugin\Field\FieldFormatter</span>;
</span></span><span>
</span><span><span>use Drupal<span>\Core\Field\FieldItemListInterface</span>;
</span></span><span><span>use Drupal<span>\image\Plugin\Field\FieldFormatter\ImageFormatter</span>;
</span></span><span>
</span><span><span>/**
</span></span><span><span> * Plugin implementation of the 'image_title_caption' formatter.
</span></span><span><span> *
</span></span><span><span> * @FieldFormatter(
</span></span><span><span> *   id = "image_title_caption",
</span></span><span><span> *   label = @Translation("Image with caption from title"),
</span></span><span><span> *   field_types = <span>{
</span></span></span><span><span> *     "image"
</span></span><span><span> *   <span>}
</span></span></span><span><span> * )
</span></span><span><span> */
</span></span><span><span>class ImageTitleCaption extends ImageFormatter {
</span></span><span>
</span><span>  <span>/**
</span></span><span><span>   * <span>{@inheritdoc}
</span></span></span><span><span>   */
</span></span><span>  <span>public function viewElements(FieldItemListInterface $items) {
</span></span><span>    <span>$elements = <span>parent::</span>viewElements($items);
</span></span><span>    <span>foreach ($elements as &$element) {
</span></span><span>      <span>$element['#theme'] = 'image_title_caption_formatter';
</span></span><span>    <span>}
</span></span><span>
</span><span>    <span>return $elements;
</span></span><span>  <span>}
</span></span><span>
</span><span><span>}</span></span>

Similaire à Drupal 7, le nom de ce fichier est important car il reflète le nom du thème. Quant au contenu, ils sont presque les mêmes que le modèle utilisé par le thème Image_Formatter, à l'exception de la légende imprimée en bas.

cela fonctionne-t-il?

Maintenant que nous avons écrit le code, nous devons activer le module et effacer tous les caches si nous avions apporté des modifications au code après l'activation. Il est temps de le tester.

Par exemple, accédez à l'article Type de contenu Paramètres d'affichage de champ sur admin / structure / types / manage / article / affichage. Pour le champ Image, sous l'en-tête du format, vous devriez pouvoir sélectionner l'image avec la légende dans le format de titre. Enregistrez le formulaire et accédez à Admin / Structure / Types / Manage / Article / Fields / Node.Article.field_image et assurez-vous que le titre du champ d'image est activé.

Enfin, vous pouvez modifier un article, télécharger une image et spécifier un titre. Ce titre continuera de se comporter en tant que tel, mais en outre, il sera affiché sous l'image comme une légende. Bien sûr, vous pouvez toujours le styliser comme vous le souhaitez, etc.

Conclusion

Dans cet article, nous avons vu à quel point il est facile de créer un formateur de champ et d'étendre le comportement par défaut dans Drupal 8. Nous avons seulement contribué à la remplacement de la vue () de ce plugin, mais nous pouvons faire beaucoup plus pour personnaliser davantage des choses. Vous n'êtes pas non plus tenu d'étendre la forme d'image. Il existe de nombreux plugins existants que vous pouvez étendre ou utiliser comme exemple.

De plus, vous pouvez également créer de nouveaux types de champs et widgets de champ. Il s'agit d'un processus similaire, mais vous devrez prendre en compte certaines informations de schéma, utiliser différentes classes d'annotation et écrire plus de code. Mais le fait est que vous êtes très flexible à le faire.

Des questions fréquemment posées sur la création de formateurs de champ personnalisés dans Drupal 8

Comment créer un formateur de champ personnalisé dans Drupal 8?

La création d'un formateur de champ personnalisé dans Drupal 8 implique plusieurs étapes. Tout d'abord, vous devez créer un module personnalisé si vous n'en avez pas déjà un. Ensuite, dans votre module personnalisé, créez un nouveau fichier dans le répertoire SRC / Plugin / Field / FieldFormatter. Le fichier doit être nommé selon la classe qu'il contiendra. À l'intérieur de ce fichier, vous définissez votre classe de format de champ personnalisée, qui devrait étendre la classe FormatterBase. Vous devrez implémenter plusieurs méthodes, y compris ViewElements () qui est responsable de la génération du tableau de rendu pour les valeurs de champ.

Quel est le but de l'annotation @FieldFormatter dans Drupal 8?

L'annotation @FieldFormatter dans Drupal 8 est utilisée pour définir un formateur de champ. Il comprend des propriétés comme ID, Label et Field_Types. L'ID est un identifiant unique pour le formateur, l'étiquette est le nom lisible par l'homme, et Field_Types est un tableau de noms de machines de type champ que le formateur prend en charge.

Comment puis-je appliquer mon format de champ personnalisé à un Champ dans Drupal 8?

Pour appliquer votre format de champ personnalisé à un champ de Drupal 8, vous devez accéder à l'onglet «Gérer l'affichage» du type de contenu, du terme de taxonomie ou d'un autre type d'entité qui a le champ. Trouvez le champ dans la liste et sélectionnez votre format personnalisé dans la liste déroulante «Format». Puis cliquez sur le bouton «Mettre à jour» et enregistrez les modifications.

Comment puis-je contrôler la sortie de mon format de champ personnalisé dans Drupal 8?

La sortie de votre format de champ personnalisé dans Drupal 8 est contrôlé par la méthode ViewElements () dans votre classe de format. Cette méthode doit renvoyer un tableau de rendu pour les valeurs de champ. Vous pouvez utiliser le système de thèmes de Drupal pour personnaliser davantage la sortie.

Puis-je utiliser un formateur de champ personnalisé pour plusieurs types de champs dans Drupal 8?

Oui, vous pouvez utiliser un formateur de champ personnalisé pour plusieurs Types de champ dans Drupal 8. Dans l'annotation @FieldFormatter de votre classe de format, vous pouvez spécifier un tableau de noms de machines de type de champ dans la propriété Field_types.

Comment puis-je créer un formulaire de paramètres pour mon format de champ personnalisé dans DRUPAL 8?

Pour créer un formulaire de paramètres pour votre format de champ personnalisé dans Drupal 8, vous devez implémenter les méthodes SettingsForm () et SettingsSummary () dans votre classe de format. La méthode SettingsForm () doit renvoyer un tableau de formulaire pour les paramètres, et la méthode SettingsSSummary () doit renvoyer un tableau de lignes de résumé pour les paramètres.

Comment puis-je utiliser un formateur de champ personnalisé pour afficher des images dans Drupal 8?

Pour utiliser un format de champ personnalisé pour afficher des images dans Drupal 8, votre classe de format doit étendre la classe ImageFormatterBase au lieu de FormatterBase. Vous devrez implémenter la méthode ViewElements () pour générer un tableau de rendu pour les valeurs de champ d'image.

Puis-je créer un formateur de champ personnalisé pour un type de champ personnalisé dans Drupal 8?

Oui , vous pouvez créer un format de champ personnalisé pour un type de champ personnalisé dans Drupal 8. Dans l'annotation @FieldFormatter de votre classe de format, vous pouvez spécifier le nom de la machine de votre type de champ personnalisé dans la propriété Field_types.

Comment Puis-je utiliser un format de champ personnalisé pour afficher des liens dans Drupal 8?

Pour utiliser un format de champ personnalisé pour afficher des liens dans Drupal 8, votre classe Forteratter devrait étendre la classe LinkFormatter au lieu de FormatterBase. Vous devrez implémenter la méthode ViewElements () pour générer un tableau de rendu pour les valeurs de champ de liaison.

Comment puis-je créer un format de champ personnalisé pour un champ multi-valeurs dans Drupal 8?

Pour créer un formateur de champ personnalisé pour un champ multi-valeurs dans Drupal 8, votre classe de format devrait prolonger la base de format Classe et implémentez la méthode ViewElements (). Cette méthode doit renvoyer un tableau de rendu pour les valeurs de champ, en prenant en compte que le champ peut avoir plusieurs valeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!