Livraison d'une distribution Drupal 9 pour les sites des écoles de Galileo France

Image extraite du 1er site de la distribution
Le Groupe Galileo, qui exploite une cinquantaine de sites de ses écoles avec Drupal 7, a confié à notre équipe la refonte technique de la nouvelle distribution Drupal 9. Atypique, ce projet devait intégrer les équipes de développement frontend du groupe et permettre de couvrir tous les cas de figures proposés par les différents sites des écoles.

Galileo Global Education

Galileo Global Education rassemble 54 écoles d’excellence dans 13 pays dans les domaines des arts, de la création, du design, de la communication et du management. En France, Galileo Global Education France est présent à Paris et dans de nombreuses villes de l’Hexagone.

Parmi les écoles les plus connues :

Le contexte

Galileo dispose d'une cellule web composée de spécialiste Drupal. Elle est chargée du déploiement et de la maintenance d'une cinquantaine de sites propulsés par Drupal 7. Très avancée en site building, en theming front-end et habituée à Drupal 7, elle a fait appel à notre équipe pour l'accompagner dans la mise à niveau des sites vers Drupal 9

Les sites des écoles, très orientés vers l'acquisition de trafic, ne proposent pas de fonctionnalités "exotiques", de comptes utilisateurs avancés ou de connecteurs tiers complexes. Mis à part quelques sites, plus avancés et plus exigeants dans leurs périmètres fonctionnels, il s'agit dans un premier temps de proposer un site "modèle" qui servira d'instance de référence pour déployer les futurs sites Drupal 9

Si nous nous sommes par conséquent appuyés sur l'architecture des sites Drupal 7 et l'organisation originale de création de contenu pour répondre à de multiples combinaisons de conception de blocs, initiée par l'équipe de Galileo France, nous avons travaillé sur un modèle de site Drupal 9 nouvelle et nous sommes concentrés à reproduire ou traduire ces habitudes.

Les sites concernés par des exigences plus fortes seront adressés dans le courant de l'année 2022, en enrichissant cette ditribution "type" des fonctionnalités supplémentaires.

Le périmètre de notre intervention

En concertation avec l'équipe de Galileo France, nous ne sommes pas intervenus sur la conception UX ou UI. La conception UX a été préparée en amont pour répondre à un maximum de cas de figure à convrir lors du déploiement de chaque site. La conception UI ne fait pas partie du périmètre de la mission puisque nous devions livrer une distribution enrichie d'un thème modulable mais dépourvue de sa charge CSS. Il est en outre convenu que notre équipe puisse venir enrichir l'équipe projet des écoles pour accélérer le déploiement des différents sites au cours de l'année.

Notre intervention a par conséquent couvert : 

  • La formation à la manipulation de Drupal 9, à la gestion de la configuration, à la manipulation des environnements de développement Lando. Le principe était ici d'accompagner l'équipe technique de Galileo France dans leur passage des habitudes de Drupal 7 à Drupal 8/9.
  • Le développement d'une distribution qui doit servir de modèle à tous les sites des écoles. 
  • La mise à disposition d'un thème Bootstrap 5 réutilisable par les équipes d'intégration de Galileo.

Architecture des contenus

L'objectif a été de livrer un modèle de site basé sur bootstrap 5, orienté pour les site builders. En utilisant ce modèle, n'importe quel type de site d'école doit pouvoir être déployé sans écrire une ligne de code.

La configuration des types de contenu, héritée des habitudes de l'équipe de Galileo France avec Drupal 7, n'est pas classique. Ils ne sont pas utilisés comme des contenus "classiques", visualisés par des vues traditionnelles. Ils sont utilisés pour produire des sections ou des blocs (inline entities). Nous avons par conséquent construit une bibliothèque de Inline Entities. L'objectif est ici de disposer ensuite, dans chaque "contenu Inline Entity", de paragraphes à ajouter à la demande, au clic.

Le projet consacre par conséquent 6 types de "contenus Inline Entities" qui servent les sections ou blocs dans une page et peuvent être imbriqués. Il permet également de disposer de 16 types de paragraphes qui peuvent alimenter les sections (Inline Entities) et peuvent également être imbriqués. Cette architecture permet de disposer d'une combinaison de possibilités de création de sections, blocs et paragraphes très importante, capable de couvrir tous les besoins de mises en page des différents sites, quelle que soit les exigences UX.

Exemples : 

  • Un type de contenu "Page de base" va reprendre le header, le menu et le footer du site.
  • Un type de contenu "Landing Page" va permettre de créer cette même page sans header, menu, footer (pour les campagnes).
  • Les actualités, de leur côté, peuvent être affichées indifféremment dans une vue liste ou dans des blocs.

Gestion des menus

Petite originalité... L'administrateur peut faire coexister 2 menus : un pour la version mobile (en version hamburger et flottant) et un pour la version classique. Ce fonctionnement original permet simplement de proposer une version mobile allégée sans surcharger les développements avec des complications techniques inutiles. 

Le thème Bootstrap 5

Le thème est divisé en deux : 

  • Un thème principal qui gère les comportements, les structures de pages, les espacements, la grille.
  • Un sous-thème bootsrap 5, basé sur le thème principal qui permet à l'équipe tehcnique de Galileo France d'alimenter les CSS.

Cette organisation facilite le travail d'intégration des CSS d'une part et de bien délimiter les responsabilités entre le fonctionnement du thème et l'alimentation des CSS.

Modules marquants

  • Inline Entity Form - Utilisé partout, fondement de l'articulation des contenus.
    Ce module, qui nécessite Entity API, fournit un widget pour la gestion en ligne (création, modification, suppression) des entités. Le cas d'utilisation principal est celui parent / enfants où les entités enfants ne sont jamais gérées en dehors du formulaire parent.
  • Field group - Très utilisé en frontend et backend.
    Ce module permet de grouper les champs, comme son nom l'indique :) Toutes les entités ont la possibilité d'ajouter des groupes pour regrouper leurs champs (des wrappers HTML par défaut sont disponibles comme des onglets verticaux, des onglets horizontaux, des accordéons, des ensembles de champs ou des wrappers <div>)
  • Telephone Validation - Utilisé lors de l'inscription à une formation ou lors d'une demande de contact, pratique pour la remontée des informations dans le CRM de Galileo France.
    Ce module fournit une validation du champ téléphone lié à la librairie libphonenumber. Le module contribué a été surchargé par une vérification JS sur le champ. Cette surcharge peut d'ailleurs faire l'objet d'une issue sur le module.
  • DropzoneJS entity browser widget - Utilisé pour le confort des contributeurs, nombreux et hétérogènes.
    Ce module permet d'utiliser la bibliothèque open source DropzoneJS qui permet de télécharger des fichiers par glisser-déposer avec des aperçus d'images. Il propose actuellement trois widgets Entity Browser (un widget simple qui génère des entités de fichier - un widget qui génère des entités Media - un widget qui utilise le formulaire d'entité en ligne pour les entités multimédias.
  • File upload directory change - Utilisé par l'administrateur du site pour spécifier le répertoire de stockage des médias.
    Ce module, encore confidentiel bien que très bien maintenu, permet de téléverser des images dans des répertoires spécifiques, qui peuvent être privés.
  • Business Rules - Utilisé pour définir l'exécution des actions en fonction de certains événements.
    Ce module semble s'imposer maintenant pour remplacer le célèbre module Rules qui a fait les beaux jours de Drupal 7.

Modules sur-mesure

En concertation avec l'équipe technique de Galileo France, nous avons au maximum évité de produire du code sur-mesure. Lorsqu'il a été impossible de faire autrement, nous avons été contraints de le faire. Les développements sur-mesure ont essentiellement concerné : 

  • CKEditor - Les modifications ont été nombreuses pour permettre à l'éditeur d'appliquer plusieurs styles sur une même balise paragraphe <p>.
  • Un module sur-mesure pour Google Analytics permettant de déposer, sous conditions, un cookie particulier.
  • Un module de développement contenant plusieurs services utilisables dans Drupal. Ce module, calqué sur le fonctionnement des sites Drupal 7, permet d'attribuer des options de contribution par l'intermédiaire de services.
  • Un module SEO qui permet de forcer le tag canonical et le short link pour altérer la pagination des vues.
  • Un module de configuration à l'attention des contributeurs qui permet de rassembler, dans une section de l'espace d'administration, toutes les options à renseigner telles que le favicon, le slogan, l'adresse mail référentes, les informations du footer, etc. Ce module simple est très pratique dans le cadre de la gestion des usines à sites.

1er projet déjà en production - Paris School of Technology and Business

La distribution modèle a été livrée en décembre 2021. Plusieurs sites sont en cours de déploiement. Un premier site est déjà en production - Le site de Paris School of Technology and Businsess. Il a nécessité une dizaine de jours de travail à l'équipe de Galileo France, tests inclus.

Exemple d'URL : https://www.pstb.fr/
Date de mise en production : 14/12/2021.