Les Champs de Contenus

Nous allons détailler ici les types de champs suivants :

  • Texte
  • Email
  • Lien web
  • Référence / Lien vers une autre entitié
  • Date
  • Calendrier
  • Adresse postale
  • FAQ
  • Tableau de données
  • Vue

La liste n’est pas exhaustive, d’autres types de champs existent tels que Nombre, Référence vers un terme de taxonomy, Double field (permet de créer des couples de champs), Liste.

Quelque soit le type de champ, vous allez pouvoir :

  • Partager un même champ entre plusieurs types de contenus ;
  • Définir l’étiquette qui sera affichée dans les formulaires ou dans les contenus ;
  • Rendre le champ obligatoire ;
  • Rédiger quelques lignes d’aide à destination des contributeurs : idéal pour partager votre charte éditoriale ;
  • Définir des variables spécifiques au type de contenus sur lequel vous utilisez le champ ;
  • Choisir une valeur par défaut ;
  • Définir des paramètres propre au champ et valable sur tous les types de contenus qui l’utilisent ;
  • Le nombre de valeurs disponibles pour le champ : le plus souvent, vous choisirez 1 ou Illimité, mais vous pouvez aussi choisir une valeur comprise entre 1 et 10.

Si vous choisissez Illimté : des boutons Ajouter et Supprimer apparaîtront dans l’interface.

Si le champ a au moins une valeur enregistrée, certaines options ne sont plus modifiables. Attention à ne pas vous tromper lors de la création du champ, vous risqueriez d’avoir à retaper ou migrer des données par la suite.

Texte

Derrière le Texte, c’est en fait plusieurs type de champs qui sont proposés :

  • Texte simple sur une seule ligne
  • Texte long sur plusieurs ligne
  • Texte long avec la possibilité de définir un champ optionnel de résumé : celui sera éditorialisé au lieu d’être une version coupée du texte long entré. Il n’est donc pas nécessaire de créer un champ séparé comme avec Drupal 6 ou d’autres CMS.

Pour les champs longs, il est possible de disposer de champs dont la valeur est filtrée : ce qui permet d’insérer du code HTML, d’utiliser des éditeurs visuels ou des langages markup ou wiki. Il est aussi possible de définir la hauteur du champ exprimé en nombre de lignes.

Les champs simples ne peuvent pas bénéficier des filtres de Drupal, et font forcément une seule ligne.

Pour les champs longs avec filtrage activé, lors de l’édition d’un contenu vous allez pouvoir choisir le filtre à appliquer. Si vous utilisez des champs multiples : le filtre pourra être différent pour chaque valeur. Vous n’avez donc pas besoin de créer deux champs différents pour utiliser suivant les cas du code HTML pur, un éditeur visuel et une syntaxe wiki : il vous suffira de modifier le filtre utilisé.

Pour l’affichage, vous allez pouvoir choisir entre différents formatteurs qui permettent d’afficher le texte intégral, ou une versoin résumé du champ.

Quelques champs textes pour créer un article.

Les éditeurs visuels

Drupal n’impose pas l’utilisation d’un éditeur visuel : vous pouvez ne pas en utiliser du tout. Si vous utilisez des filtres pour la syntaxe Wiki ou Markdown, vous n’en ressentirez pas le besoin

Mais si vous décidez d’en utilisez un, Drupal va vous permettre celui qui vous convient le mieux. Et même vous laisser choisir le bon sur le champ que vous voulez, en fonction de ce que vous allez écrire.

Wysiwyg

Le module Wysiwyg permet l’utilisation d’éditeurs visuels dans vos champs de texte multilignes.

La page de paramétrage permet de pouvoir facilement définir les boutons à activer, la langue des bulles d’aide, l’aspect à choisir, la feuille de styles à utiliser et les traitements de nettoyage de code HTML à opérer avant l’enregistrement en base de données, etc.

Inutile donc de mettre le nez dans le guide du développeur pour disposer d’un éditeur visuel sur mesure.

Pour définir un profil Wysiwyg, vous devez attacher un éditeur visuel à un profil de format de texte. Ces formats de textes sont utilisés pour définir les filtres qui seront appliqués par Drupal au moment de l’affichage.

En définissant un profil Wysiwyg, vous définissez donc à la fois une interface de saisie, tout y associant le filtrage qui sera fait sur le contenu, en sortie.

Quelques exemples de Profils sont nécessaires pour mieux illustrer la puissance de cette chaine :

  • Texte filtré : Utilisez une zone de texte avec TinyMCE pour rédiger vos contenus éditoriaux individuels : vous souhaitez insérer des images donc vous allez activer le bouton correspondant côté Wysiwyg, et autoriser la balise
  • côté Format de texte.
  • Markdown : Pour rédiger avec la syntaxe MarkDown, vous allez préférer l’éditeur EpicEditor qui offre une interface double, et activer le filtre Markdown dans le Format de texte correspondant.
  • Code : Pour insérer quelques lignes de code, vous allez laisser votre champ de texte sans éditeur visuel et activer le filtre Prettifier qui applique une coloration syntaxique à votre texte de code.

Ainsi, vous disposez à la fois d’une interface adaptée et d’une sécurisation de votre site.

Ajoutez à ce dispositif le module Better Formats pour vous assurez que tous les formats de texte ne sont pas disponibles pour tous les champs et tous les rôles, mais en fonction de la destination que vous leur avez choisi : vous avez terminé de sécuriser la partie éditoriale de votre site.

Le paramétrage des éditeurs visuels est autant une question de sécurité, qu’une amélioration de l’ergonomie pour vos contributeurs.

Choisir son éditeur visuel pour Wysiwyg

Le module Wysiwyg intègre des interfaces pour une dizaine d’éditeurs visuels différents. Petit tour d’horizon.

TinyMCE : l’éditeur visuel de référence pour Wysiwyg

Le cas CKeditor est un peu particulier

  • FCKeditor : il s’agit d’une ancienne version de l’éditeur, ne l’utilisez pas
  • CKeditor : préférez le module CKEditor for Drupal qui est maintenu par l’éditeur de CKeditor. CKeditor sera l’éditeur visuel par défaut choisi pour D8

EpicEditor : très bien conçu pour la syntaxe Markdown, il permet de prévisualiser le rendu en alternant l’aspect de l’éditeur. En mode plein écran, vous pouvez suivre en temps réel le texte tapé et le rendu final.

MarkItUp : l’éditeur le mieux adapté pour les fans de syntaxes par Markup ou Balises — HTML, Textile, Wiki syntax, Markdown, BBcode.

WYMeditor : un éditeur plutôt léger et disposant de qualités un peu inhabituel en donnant à voir le type de paragraphe, mais aussi la nature des informations typées avec RDFa. Un bon outil pour les geeks attachés à vérifier la qualité du code HTML généré par leur éditeur, et aux standards du web sémantique. D’une manière général, l’éditeur “What You Mean” est plus orienté vers le discours de son utilisateur que vers la mise en forme qui devrait resté le territoire de la feuille de styles et de la Charte graphique du site.

jWysiwyg : non testé, semble maintenu mais la liste des navigateurs testée annoncée dans le fichier README.md sur Github semble un peu ancienne

openWysiwyg : ne semble plus à l’état de l’Art

NicEditor : la documentation du site précise que l’éditeur n’est plus maintenu et recommande CKEditor et TinyMCE pour un usage similaire

Whizzywig : le simple aspect du site de l’éditeur et de l’éditeur visuel lui-même montre que cet éditeur n’est plus en phase avec le web actuel…

YUI editor : YUI pour Yahoo! User Interface. Yahoo! a sans nul doute une grande expérience en matière d’interface. Le lien de la page d’administration de Wisiwyg renvoie vers la version 2 de YUI editor, laquelle recommande la version 3 plus récente. Nous n’avons pas eu l’occasion de tester cette installation, mais l’ergonomie est très séduisante.

Email field

Ce champ permet de contrôler le bon format d’une adresse e-mail et fournit un formatteur pour disposer d’un lien mailto.

Il fournit aussi la fonctionnalité invisimail qui limite la récupération par des robots en cachat l’adresse dans le code HTML, et un lien qui redirige vers un formulaire sécurisé où l’adresse n’apparaît pas.

Link

Le champ Lien permet la création de liens web. Son formulaire d’édition prévoit deux champs :

  • Titre
  • URL
De nombreux paramètres pour rendre le champ simple à l’usage.

Créez votre champ sur la page Gérer les champs en choisissant le type Lien. Sur la page de paramétrages, vous avez la possibilité d’activer la validation de l’adresse fournie : ceci permet de vérifier si le lien est brisé ou si une coquille a été introduite en tapant l’URL.

Il est possible l’URL optionnelle : ceci vous permet de créer un lien dont vous préciserez l’adresse web plus tard.

Le titre du lien peut être obligatoire ou optionnel ou ne pas être proposé : en ce cas, seul le champ URL est utilisé. Il est aussi possible de fournir un titre statique (ex : “Visitez le site de notre partenaire.”) qui mènera vers l’adresse web renseignée.

Vous avez aussi la possibilité de limiter la longueur du champ titre à la saisie, et la longueur affichée de l’URL.

Enfin, vous pouvez renseigner les options “rel” la sécurité et “title” pour l’accessibilité. Une classe peut aussi être appliquée au champ.

S’il est possible de créer des liens internes et externes avec ce module, on préfèrera généralement utiliser Entity Reference pour les liens internes vers des contenus car le rendu est beaucoup plus riche et souple. Là encore, il faut toujours faire attention à partir de la structure du site, et non pas des maquettes graphiques, lors de la conception d’un site.

Deux champs simples pour le contributeurs.

Entity reference

Entity Reference est un champ qui permet de gérer des liens extrêmement riches entre entités, en tirant notamment partie des modes d’affichages.

Créez un champ Entity Reference en vous rendant sur la page Gérer les champs de votre type de contenu ou tout autre bundle d’entité souhaité. Sur la page des paramètres du champ, vous devez choisir l’entité que vous souhaitez référencer, puis les bundles utilisables : une seule entité doit être choisie par champ, mais le nombre de bundles n’est pas limité.

Si le module Views est activé sur votre site, vous avez la possibilité de créer un vue pour définir le périmètre des contenus attachables : vous pouvez ainsi définir l’ensemble des contenus créés par l’utilisateur connecté, qui sont publiés et de type “Article” ou “Evènement”. Il sera ainsi impossible de créer un lien vers la page de mentions légales.

Certaines options dépendent du widget choisi : si vous utiliser un champ avec auto-complétion, vous devrez définir sur le texte entré “Commence par” ou bien “Contient”.

Une fois le champ créé, vous ne pourrez plus modifier l’entité utilisé pour le champ. Par contre, le périmètre autorisé pour choisir un contenu à référencer reste modifiable à tout moment : mais garder en tête les valeurs déjà utilisées, cela peut poser problème lors d’une édition ultérieure de ces contenus.

Attention à ne pas confondre ce Entity Reference avec le module References : celui-ci est à privilégier en cas de migration depuis Drupal 6. Dans tous les autres cas, Entity Reference est préférable car il est intégré au Core de Drupal 8. A noter qu’un module Reference to EntityReference Field Migration a été développé pour accompagner le passage de References vers Entity Reference : il s’agit donc d’un chemin incontournable pour aller de Drupal 6 à Drupal 8.

En vous rendant à présent sur la page Afficher les champs, vous allez pouvoir choisir le formatteur qui vous convient :

  • Label : affiche le titre, avec ou sans un lien pointant vers le contenu référencé. Nous sommes ici dans un usage proche de celui qui est réalisable avec le module Link.
  • Entity id présente l’index du contenu tel qu’enregistré dans la base de données. C’est en fait l’information brute qui est enregistrée lorsque l’on pointe vers un autre contenu.
  • Rendered entity vous permet de choisir le mode d’affichage à utiliser pour insérer le contenu référencé dans le contenu en cours. Toute la puissance du module et de Drupal est là. .

La mise en abîme est bien sûr possible : faites simplement attention à ne pas faire des références croisées entre contenus, cela peut casser votre site.

Cliquez sur Enregistrer et aller voir une des pages concernées : cela donne très vite beaucoup d’idées pour le reste du site.

Rappelez que vous pouvez utiliser cette approche depuis toutes les entités, pour pointer vers toutes les entités. Dans les commentaires, vous pouvez ainsi permettre à vos visiteurs de faire un lien riche vers un article ou un autre commentaire du site.

Un autre exemple est l’utilisation de ce champ pour permettre au membre de sélectionner trois articles qu’il a écrit à usage d’un mode d’affichage Signature. Si vous prévoyez un champ Entity Reference pour l’auteur de l’article, fondé sur le mode d’affichage Signature : tous les articles afficherons une jolie présentation avec titre, résumé et photo des trois articles choisis par son auteur, dans la signature de ses articles.