Delivery of a Drupal 9 distribution for the websites of Galileo France schools

Galileo Global Education

Galileo Global Education brings together 54 top schools in 13 countries in the fields of arts, creation, design, communication, and management. In France, Galileo Global Education France is present in Paris and many cities across the country.

Among the most well-known schools:

• Le Cours Florent – Le Cours Florent trains the Artists of Tomorrow: acting, theater, musical comedy, music.
• Penninghen – School of graphic arts, interior design, and art.
• ESG – Business schools in Aix, Bordeaux, Montpellier, Nantes, Rennes, Paris, Strasbourg, Toulouse, and Tours.
• Studi – Major school 100% online.
• Ateliers de Sèvres – Preparation for art and animation schools.
• Strate Design – Design school in Paris and Lyon.
• Conservatoire Libre du Cinéma Français – Cinema school.
• Web School Factory – The top digital management school.
• etc.

Context

Galileo has a web team made up of Drupal specialists. The team is in charge of deploying and maintaining around fifty sites powered by Drupal 7. Highly skilled in site building, front-end theming, and experienced with Drupal 7, they called on our team to support the upgrade of the sites to Drupal 9.

The schools’ websites, which focus heavily on traffic acquisition, do not offer “exotic” features, advanced user accounts, or complex third-party integrations. With the exception of a few more advanced sites with larger functional scopes, the initial plan was to create a “model” site to serve as the reference instance for rolling out future Drupal 9 sites.

So, based on the architecture of the Drupal 7 sites and Galileo France’s original content creation organization designed for multiple block combinations, we worked on a new Drupal 9 site model and focused on replicating or translating these patterns.

Sites with more specific requirements will be addressed throughout 2022, by enriching this “standard” distribution with additional features.

Scope of our involvement

In consultation with the Galileo France team, we did not intervene in UX or UI design. The UX was prepared ahead of time to cover as many cases as possible during each site’s deployment. UI design was not part of the mission since our delivery was a distribution enriched with a modular theme but without any CSS included. Also, it was agreed that our team could step in to strengthen the project team of the schools to accelerate the deployment of various sites throughout the year.

Our involvement therefore covered:

• Training in using Drupal 9, configuration management, and handling Lando development environments. The goal was to support Galileo France’s technical team as they transitioned from Drupal 7 to Drupal 8/9.
• Developing a distribution that should serve as a model for all school sites.
• Providing a reusable Bootstrap 5 theme for Galileo’s integration teams.

Content Architecture

The goal was to deliver a model site based on Bootstrap 5, aimed at site builders. Using this model, any type of school website can be deployed without writing a single line of code.

The content type configuration, inherited from Galileo France’s Drupal 7 practices, is not standard. They are not used as “classic” contents, viewed through traditional views. Instead, they are used to produce sections or blocks (inline entities). We therefore built a library of Inline Entities. The goal is for each “Inline Entity” content to then have paragraphs that can be added on demand with a click.

The project includes 6 types of “Inline Entities” content that provide the sections or blocks in a page and can be nested. There are also 16 types of paragraphs that can feed the sections (Inline Entities) and can also be nested. This architecture allows a very large combination of section, block, and paragraph creation to meet all layout needs of the various sites, whatever the UX requirements.

Examples:

• A “Base Page” content type will include the site’s header, menu, and footer.
• A “Landing Page” content type will allow you to create the same page without a header, menu, or footer (for campaigns).
• News items can be displayed either in a list view or as blocks.

Menu Management

A small innovation… The administrator can have two menus coexist: one for the mobile version (in hamburger and floating style) and one for the standard version. This original approach simply provides a lighter mobile version without complicating development with unnecessary technical challenges.

The Bootstrap 5 theme

The theme is split into two parts:

• A main theme that manages behaviors, page structure, spacing, and the grid.
• A Bootstrap 5 sub-theme based on the main theme, which allows Galileo France’s technical team to provide CSS.

This setup makes it easier to integrate CSS and clearly define the responsibilities between theme functionality and CSS management.

Key Modules

• Inline Entity Form – Used everywhere, the foundation of content structure.
  This module, which requires Entity API, provides a widget for inline management (creation, editing, deletion) of entities. The main use case is parent/child relationships where child entities are never managed outside the parent form.
• Field group – Extensively used in frontend and backend.
  This module lets you group fields, as the name suggests :) All entities can add groups to organize their fields (HTML wrapper by default are available, such as vertical tabs, horizontal tabs, accordions, field sets, or
  wrappers
  ).
• Telephone Validation – Used during course registration or contact requests, useful for feeding information to Galileo France’s CRM.
  This module provides validation for phone fields using the libphonenumber library. The contributed module has been extended with JS validation on the field. This enhancement could be submitted as an issue for the module.
• DropzoneJS entity browser widget – Used for the comfort of the many and diverse contributors.
  This module makes it possible to use the DropzoneJS open source library for drag-and-drop file uploads with image previews. It currently offers three Entity Browser widgets (a simple widget that creates file entities, one that creates Media entities, and a widget that uses the inline entity form for media entities).
• File upload directory change – Used by site administrators to specify the media storage directory.
  This little-known but well-maintained module allows you to upload images into specific directories, which can be private.
• Business Rules – Used to define actions that run based on specific events.
  This module appears to be the new standard to replace the famous Rules module, which was a staple of Drupal 7.

Custom Modules

In consultation with Galileo France’s technical team, we did our best to avoid producing custom code. When it was unavoidable, we delivered. The custom developments mainly included:

• CKEditor – Numerous changes to allow the editor to apply several styles to the same paragraph

  tag.

• A custom module for Google Analytics to drop a specific cookie under certain conditions.
• A development module containing several services for Drupal. This module, inspired by the operation of the Drupal 7 sites, allows contribution options to be assigned via services.
• An SEO module to force the canonical tag and short link and modify view pagination.
• A configuration module for contributors that brings together, in a section of the admin area, all the options to be filled out, such as favicon, slogan, main email address, footer information, etc. This simple module is very practical for managing multi-site factories.

First project already live – Paris School of Technology and Business

The model distribution was delivered in December 2021. Several sites are currently being rolled out. The first site is already live – the Paris School of Technology and Business site. It took Galileo France’s team about ten days of work, including testing.

Sample URL: https://www.pstb.fr/
Go-live date: 12/14/2021.