Drupal 10 : créer un formateur de champs : cas d'une Grille d'image

Le formateur de champs permet de définir la façon donc une donnée peut être rendu. Cette fonctionnalité est très utile car elle permet de développer des rendus utilisable sur plusieurs site.

Pour faciliter la compréhension, nous allons créer un formateur permettant d'obtenir l'affichage des images sous formes de grilles.
( NB: Nous n'allons pas nous attardez sur les styles dans ce tuto. )

Prerequis :
Creating custom field types, widgets, and formatters

Par ou commencer ?
Vous devez deteminer le champs responsable de la gestion des données, pour notre cas cest le champs image.

namespace Drupal\image\Plugin\Field\FieldType;


....
 *   default_widget = "image_image",
 *   default_formatter = "image",
...

# voir le fichier core/modules/image/src/Plugin/Field/FieldType/ImageItem.php

à partir de ce dernier, on determine le formater par defaut : image. On va l'etendre pour creer le notre.

<?php

namespace Drupal\more_fields\Plugin\Field\FieldFormatter;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\image\Plugin\Field\FieldFormatter\ImageFormatter;

/**
 * Plugin implementation of the 'FieldGalleries' formatter.
 *
 * @FieldFormatter(
 *   id = "more_field_mit_gallery_formatter",
 *   label = @Translation("Mitor Gallery (Grid)"),
 *   field_types = {
 *     "image"
 *   },
 *   quickedit = {
 *     "editor" = "image"
 *   }
 * )
 */
class FieldMitorGalleryFormatter extends ImageFormatter {


}

Ce code minimal permet deja d'afficher notre champs dans les options de configuration du formatteur.

Nous ajoutons la methode qui permet de gerer l'affichage de notre champs.

  /**
   *
   * {@inheritdoc}
   */
  public function viewElements(FieldItemListInterface $items, $langcode) {
    $elements = [
      '#theme' => 'more_field_mit_gallery_formatter',
      'items' => parent::viewElements($items, $langcode)
    ];
    return $elements;
  }

Pour faciliter le rendu, nous avons opter de passer par un theme. ( mais vous etre libre, d'utiliser une autre approche ).
Nous y reviendrons plus tard.

Ensuite, nous ajoutons 2 methodes defaultSettings, et settingsForm qui permettent de gerer la configuration.
 

  /**
   *
   * {@inheritdoc}
   */
  public static function defaultSettings() {
    return [
      "container_class" => "",
      "item_class" => ""
    ] + parent::defaultSettings();
  }


  /**
   *
   * {@inheritdoc}
   */
  public function settingsForm(array $form, FormStateInterface $form_state) {
    $elements = parent::settingsForm($form, $form_state);
    $elements['container_class'] = [
      "#type" => "text_field",
      "#title" => $this->t('Container class'),
      '#default_value' => $this->getSetting('container_class')
    ];
    $elements['item_class'] = [
      "#type" => "text_field",
      "#title" => $this->t('Item class'),
      '#default_value' => $this->getSetting('item_class')
    ];
    return $elements;
  }