Drupal 9

De wikilivois
Aller à la navigationAller à la recherche


Drupal est un logiciel qui permet aux individus comme aux communautés d'utilisateurs de publier facilement, de gérer et d'organiser un vaste éventail de contenus sur un site web.

Des dizaines de milliers de personnes et d'organisations utilisent Drupal pour propulser des sites de toutes tailles et fonctions. - http://drupalfr.org/

Cette page donne explications concrètes d'installation et configuration de Drupal 9. Il existe aussi une page Drupal 7.


Installation & Mise à jour

Installation

#composer create-project drupal/recommended-project:^9 my_site_name_dir
  • Pour choisir le répertoire d'installation

Change directories to my_site_name_dir and edit the composer.json file to suit your needs. For example, to change the sub-directory from 'web' to something else, the keys to modify are the 'extra' sub-keys 'web-root' (under 'drupal-scaffold') and 'installer-paths'.

  • Paramétrer les hôtes de confiance

https://www.drupal.org/docs/installing-drupal/trusted-host-settings

<licode file=site/default/settings.php> 

$settings['trusted_host_patterns'] = [
   '^livois\.com$',
   '^.+\.livois\.com$',
];

</licode>

Mise à jour

  • Vérifier la version de drupal
#cd htdocs/www/
#composer show drupal/core | grep versions
  • Mettre à jour à la dernière version
#composer update "drupal/core-*" --with-all-dependencies


Remarques

<licode file=composer.json> "provide": { "drupal/media": "*" }, </licode>

Site de développement (staging)

Mise à jour

Les fonctionnalités de D9

Le forum

Le forum fait partie du core de D9. Il en sort pour D10.

  1. Activer le forum dans extensions.
  2. Créer les termes de taxonomie correspondant aux thématiques de forum désirées
  3. Dans Structure>Types de contenu>Forum topic, ajuster les droits en fonction du type d'utilisateur

Les articles (livres)

Afficher le saint du jour

Nous utilisons ici une page de base et le fonctionnement de Drupal pour afficher le saint du jour.

Le widget du site Nominis nous donne le code à intégrer dans une page de base. <licode file="Saint du jour">

<script type="text/javascript" src="https://nominis.cef.fr/widgets/widget.php?id=widget_nominis&format=2"></script>

</licode>

Créer la vue bloc "Aujourd'hui" 

 Title: Aujourd'hui
 Format: Liste non mise en forme
 Afficher:  Champs
 Champs: Content : Body
 Critères de filtrage: Content : Identifiant (ID) (= id_de_la_page)

Les modules externes

Améliorations ergonomiques & fonctionnelles

Rendre les URLs plus lisibles avec pathauto

Le module Pathauto génère automatiquement des alias d'URL/chemin pour différents types de contenu (nœuds, termes de taxonomie, utilisateurs) sans que l'utilisateur n'ait à spécifier manuellement l'alias de chemin. Cela vous permet d'avoir des alias d'URL comme /categorie/mon-titre-de-node au lieu de /node/123 . Les alias sont basés sur un système de "modèle" qui utilise des jetons que l'administrateur peut modifier. La page d'aide (<drupal>/admin/help/pathauto) explique comment configurer et générer les alias.

Exemples de règles: 

article: article/[node:book:root:title]/[node:title]
forum: forum/[node:taxonomy_forums:entity]/[node:title]
nouvelle: nouvelle/[node:title]
utilisateur: user/[user:display-name]

La mise à jour des alias peut se faire dans admin/content, en sélection le contenu à mettre à jour et choisissant Mettre à jour l'alias d'URL dans le menu Action.


Ouvrir le menu dans une autre fenêtre


Sécuriser l'envoi de mail en paramétrant le serveur smtp

Profile

https://www.drupal.org/project/profile

Gérer les droits avec Permission by Terms

  • Installer le module Permission by Term
  • Dans Taxonomy, créer un vocabulaire "diffusion", ajouter 2 termes: public & privé
    • Pour le terme public autoriser les rôles utilisateur anonyme, utilisateur authentifié, administrateur
    • Pour le terme privé, autoriser les rôles utilisateur authentifié, adminstrateur
    • Rajouter le vocabulaire dans les structures concernées (exemple: albums photos)

Créer une galerie d'albums photos

Installation du module

Modules:

  • Photo Albums (photo_albums)

The only configuration needed for this module is to add an encrytion key and method to your settings.php file. You can choose any encryption method supported by OpenSSL (see below for a list of supported methods - this list is subject to change).

To add these values to your settings.php file, add them as follows: <licode file=settings.php> $settings['two_way_hashing_key'] = '3F4428472B4B6EE0655368566D597133C43677397A576826452948404D635166'; $settings['two_way_hashing_method'] = 'aes-256-ctr'; </licode>

The values above are just examples, but you must make sure you match the key length to the method chosen, in this case aes-256-ctr expects 64 hexadecimal characters.

  • Colorbox
    • il faut télécharger la bibliothèque colorbox dans le répertoire www/libraries/colorbox (qu'il faut créer)
  • Crop
  • Pathauto
  • File field Paths
    • j'utilise ce module pour protéger l'accès aux photos, en les renommant avec un aléas
    • Editer Administration>>Structure>>Types de média>>Modifier>>Photo Album Image et modifier le nom du fichier en [media:mid]_[random:number].[file:ffp-extension-original]

Améliorer le rendu de la vue photo-albums

La page d'albums affiche 4 photos de chaque album qui sont très particulières car très focalisées sur le centre. Cela fait même l'objet d'une remontée.

Pour changer cela, il faut modifier le style d'image: Photo Album Thumbnail (110x110). Il est configuré initialement en "Focal Point Crop 110x110". En le remplaçant par "Mise à l'échelle et recadrage 110×110", le rendu est beaucoup plus acceptable. Il faut réimporter les photos pour que cela fonctionne.

Améliorer l'affichage d'un album avec les grilles CSS

Le contenu d'un album n'affiche qu'une seule colonne. C'est problématique quand l'album a beaucoup de photos. La solution est de changer les grilles CSS.

J'utilise pour cela le module asset_injector. L'inspection du code m'indique que je peux changer l'attribut field--name-field-photos pour les albums photo. Je crée donc la grille avec une injection que j'appelle albumphoto:

<licode file=albumphoto> .field--name-field-photos { display: grid; grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) ); } </licode>

Configurer colobox en mode diaporama

Admin>Configuration>Media>Colorbox settings

Choisir Options > Personnalisé et activer les paramètres de diaporama

Vue Photos Aléatoires


  1. Installer les bibliothèques requise
  2. Installer & activer le module views_slideshow
  3. Créer la vue "Photos Aléatoires"
Format: Diaporama, choisir l'effet dans paramètres
Afficher: Media / Maître
Champs: Media:Name ou Media:Entité rendue
Critères de filtrage:  Media : Published (= True) &  Media : Media type (= Photo Album Image)
Critères de tri: Global : Au hasard (asc)


Bug d'affichage pour les utilisateurs connectés:

Avec le thème Olivero, le block ne s'affiche pas quand l'utilisateur est authentifié. Il affiche le code html suivant: 

 <span data-big-pipe-placeholder-id="callback=Drupal%5Cblock%5CBlockViewBuilder%3A%3AlazyBuilder&args%5B0%5D=views_block__photos_aleatoires_block_1&args%5B1%5D=full&args%5B2%5D&token=xxxxxx"></span>

Le problème a été rencontré par d'autres personnes ici

En regardant les messages d'erreurs de la console du navigateur, le problème a été corrigé en renommant le répertoire jquery.hoverIntent - dans libraries - en jquery.hover-intent.

Mieux comprendre le module & la gestion des albums dans Drupal 9

Il est probablement possible de gérer des abums sans le module photo_albums ou en créant un module plus simple.

Photo Albums manque de souplesse : la lecture de son code permet de l'adapter à ses besoins.

Aussi, voici une liste de tables existantes en lien avec les albums photos:

  • file_managed: filename, fid=n° de l'image
  • file_usage: fid, type=media
  • media: mid=fid, bundle=photo_album_image
  • media_field_data: information sur la photo mais pas de lien avec le n° d'album
  • node_field_photos: fait le lien entre la photo et l'album: entity_id=n° d'album, field_photos_target_id=n° de photo
  • node: id=n° d'album, type=album

A noter les nombreuses tables associées aux révisions.

Créer une page vidéos avec Video Embed Field

Installer Video Embed Field avec composer.

Créer un contenu Vidéo avec 4 champs:

  1. Body (le texte)
  2. Le tag Diffusion (public, privé) pour préciser les droits d'accès (cf taxonomie)
  3. Le champ Vidéo distante de type Video Embeded - pour les vidéos diffusées sur Youtube
  4. Le champ Vidéo à déposer de type Fichier. Ce champ peut être paramétré
    • en autorisant les extensions suivantes: mp3, mp4, ogg, avi, mpeg, vob
    • le répertoire dans sites/default/files où les vidéos seront déposées
    • le renommage des fichiers avec l'utilisation d'une option random pour qu'il ne soit pas facile à trouver, pour des raisons de sécurité d'accès
    • la taille maximale du fichier qui est de toutes les façons inférieure à la limite paramétrée par PHP

Il n'y a pas grand chose à préciser pour l'affichage du formulaire si ce n'est de proposer une liste de sélection pour le champ Diffusion.

Nous définissons deux affichages, en cachant les libellés:

  • Default pour afficher la vidéo - Liens|Body|Vidéo distante|Vidéo à déposer
  • Accroche pour afficher plus simplement sur une page "Vidéos" - Vidéo distante|Vidéo à déposer

Reste la vue Vidéos familiales à paramétrer et ) afficher dans le menu: 

Title: Vidéos familiales
Format: Grid (4 colonnes) | Afficher Content: Accroche
Critères de filtrage: Content : Published (= Yes) | Content : Content type (= Vidéo)
Critères de tri: Content : Écrit le (desc)

Webtrees

Ce module fournit une intégration limitée du site Web de généalogie Webtrees avec Drupal. Il est conçu pour fournir une prise en charge de l'authentification unique, Drupal étant le frontal. Il se connecte et se déconnecte essentiellement des deux serveurs en même temps. Il crée un utilisateur correspondant sur l'autre site si nécessaire.

Essais de thèmes

Modifier le CSS avec asset injector

Olivero

DXPR

#composer require 'drupal/bootstrap5:^2.0'
#composer require 'drupal/dxpr_theme:^5.0'

Activer le module DXPR Theme Helper via l'interface Extension.


Les fichiers logo.png téléversés se retrouvent dans le répertoire sites/default/files ou sites/default/files/dxpr_theme/images/

MAYO

Installer via git 

#cd themes/contrib/
#git clone --branch '8.x-1.x' https://git.drupalcode.org/project/mayo.git
#cd mayo

Puis appliquer la patch 

#wget https://www.drupal.org/files/issues/2022-07-11/add_drupal_10_compatibility_fix_install_configs-1011656-3.patch
#git apply -v add_drupal_10_compatibility_fix_install_configs-1011656-3.patch

Cela ne semble pas tout à fait suffisant pour la version 9.5.2 de Drupal. Une page d'erreur s'affiche quand on cherche à paramétrer le thème.

Pour aller plus loin

Office365

  1. Installer l'application
  2. Définir les droits
  3. Créer un compte azur & microsoft365 s'ils n'existent pas déjà
  4. Créer un lien entre le site et l'environnement Microsoft365
    1. Aller sur la page https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps
    2. + Nouvelle inscription
    3. Donner le nom de l'application - livois.com
    4. Choisir le type de compte pris en charge - Locataire unique
    5. Donner l'url de redirection Web: https://drupal9.livois.com/web/o365/callback
  5. Aller dans Certificats & Secrets dans le menu de gauche
    1. Créer un Nouveau Secret Client et noter l'ID et la clé
  6. Aller dans API autorisées dans le menu de gauche
    1. Cliquer sur ajouter une autorisation
    2. Cliquer sur Microsoft Graph, Autorisations déléguées
    3. Les autorisations email/offline_access/openid/profile/User.Read sont cochées par défaut
    4. Cliquer pour les activer
  7. Configurer sites/default/settings.php

<licode file=sites/default/settings.php> // Office 365 connector client ID. $settings['o365']['api_settings']['client_id'] = '<client id>'; // Office 365 connector client secret. $settings['o365']['api_settings']['client_secret'] = '<client secret>'; // Office 365 connector tenant ID = ID de l'annuaire (locataire). $settings['o365']['api_settings']['tenant_id'] = '<tenant id>'; // Office 365 connector redirect URL after login. $config['o365.api_settings']['redirect_login'] = 'https://www.example.com'; // Office 365 connector redirect callback URI. $config['o365.api_settings']['redirect_callback'] = 'https://www.example.com/o365/callback'; </licode>

SSO

Ce module permet d'utiliser le Single Sign In (SSO) d'Office 365 vers Drupal.

Ce module ajoute un bouton "Connexion via SSO" au formulaire de connexion par défaut. En cliquant sur ce lien, les utilisateurs seront redirigés vers votre fenêtre de connexion Office et renvoyés à Drupal lors de la connexion. Le module crée automatiquement un utilisateur (s'il n'est pas déjà présent) et effectue une connexion pour cet utilisateur.

Lorsque ce module est activé et que les utilisateurs sont connectés avec leurs informations d'identification Microsoft, d'autres modules peuvent envoyer des requêtes à l'API Microsoft Graph. Certains des sous-modules l'utilisent déjà.

SSO User

Le module Office 365 SSO User permet de synchroniser les données d'Office 365 vers Drupal lorsque l'utilisateur se connecte à votre site.

Sur la page, vous pouvez activer la synchronisation et ajouter un mappage de champ de l'API Graph à <Site Drupal>/admin/config/system/o365/settings/sso_user

Ce mapping n'a un intérêt qu'avec l'utilisation du module profile de Drupal.

Onedrive

Tester avec un utilisateur connecté en allant à la page /my-onedrive

Dans les logs Drupal, j'obtiens une erreur : 

"Tenant does not have a SPO license.

L'authentification Onedrive ne fonctionnerait que pour les comptes entreprises ou mon application est mal configurée. Quelques pages pour aller plus loin:

Google API

Authentification Google

Module d'authentification:

Créer une "application web" google

  • Ouvrir la console Google API
  • Créer un projet dans le tableau de bord (ex: Google Photos Livois)
  • Aller dans l'écran de consentement OAuth
    • Nom de l'application = nom du site = livois.com
    • Adresse e-mail d'assistance utilisateur
    • Page d'accueil de l'application : la page d'accueil du site
    • Ajouter le nom de domaine autorisé: livois.com
    • Adresse e-mail du développeur
  • Créer les identifiants
    • Choisir ID Client OAuth
    • Type d'application: Web application
    • Nom du client: drupal9
    • Redirection: https://drupal9.livois.com/web/google_api_client/callback - le https est obligatoire
    • Cela donne un ID Client et une clé secrète qu'il faut ensuite utiliser lors de la configuration du module
  • Configurer Drupal : Configuration > Google Api Client Listing
    • Name = Nom du client : drupal9
    • Client ID
    • Client Secret

Google Photos

    • Activer l'API : Photos Library API
      • Services : Google OAuth2 API (pas de Photo^^)
      • Scopes : sélectionner l'ensemble
      • Is Access Type Offline : laisser coché
      • Cliquer ensuite sur "authenticate" dans le champ Operations


Copyright

© 2021-2023 Christophe de Livois

Tête de GNU Vous avez l'autorisation de copier, distribuer et/ou modifier ce document suivant les termes de la GNU Free Documentation License, Version 1.2 ou n'importe quelle version ultérieure publiée par la Free Software Foundation; sans section invariante, sans page de garde, sans entête et sans page finale. Pour plus d'informations consulter le site de l'APRIL.
Récupérée de « https://wiki.livois.com/mediawiki/index.php?title=Drupal_9&oldid=2006 »