Installation Drupal
Block en colonne 1
Ce site est un site Drupal, le CMS que j'utilise en tant que développeur pour la plupart de mes sites persos ou de clients.
Ce premier article a pour but de noter ici les installations que j'ai faites sur ce site afin d'avoir quelque part la liste des modules Drupal que je trouve nécessaires ou intéressants et pour partager avec ceux qui atterriraient ici mon expérience de drupalien.
Sur ce site installé à la base en Drupal V 9.10 j'ai installé les modules / thèmes suivants :
Thèmes
Thème Contrib Bootstrap (www.drupal.org/project/bootstrap) qui me permet de créer un thème dérivé pour le style et le design du site.
Thème custom tasa
Au départ quelques fichiers dans le répertoire web/themes/custom/tasa :
Le fichier tasa.info.yml
type: theme
base theme: bootstrap
core: 8.x
core_version_requirement: ^8 || ^9
name: 'Tasa'
description: 'Thème tasa basé sur Bootstrap.'
package: 'Bootstrap'
regions:
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'
libraries-extend:
bootstrap/framework:
- tasa/framework
Le fichier tasa.libraries.yml
framework:
css:
theme:
css/: {}
Le fichier style.css dans web/themes/custom/tasa/css
Et on peut commencer à s'amuser ...
Modules
Les modules sont ici dans l'ordre dans lequel je les ai installé, soit parce qu'ils me semblent indispensables au départ soit parce que j'en ai besoin au fur et à mesure. Par exemple en écrivant cet article je me rend compte très vite que je vais avoir besoin de faire des liens externes, donc il me faut la possibilité de paramétrer une option target="_blank" qui n'est pas prévue de base dans Drupal (pourquoi !?)
Admin Toolbar (www.drupal.org/project/admin_toolbar) permet d'avoir un menu d'administration un peu plus sympa.
Editor Advanced link donc (www.drupal.org/project/editor_advanced_link) pour gérer un peu mieux les liens (cf plus haut). Ne pas oublier de le configurer dans les formats de textes
image_widget_crop (www.drupal.org/project/image_widget_crop) permet de recadrer les images directement depuis le back office.
- Avant de pouvoir utiliser ce module il faut définir un ou plusieurs types de recadrages (/admin/config/media/crop) qui permettent de forcer à faire des images avec des proportions voire des tailles définies.
- Ensuite il faut créer un ou plusieurs styles d'images (/admin/config/media/image-styles) pour utiliser ces types de recadrages : choisir "recadrage manuel" avant de pouvoir choisir le type de recadrage.
- Ensuite dans la gestion de l'affichage du formulaire (/admin/structure/types/manage/article/form-display - article dans mon cas) on peut choisir ce style d'image pour le crop :
choisir Image widgetCrop comme widget puis dans la config un ou plusieurs styles d'images prédéfinis. - Enfin dans la gestion de l'affichage (/admin/structure/types/manage/article/display) on peut une fois de plus associer le style d'image choisi. Du coup si on a défini plusieurs styles d'image et qu'on les a associés à l'étape précédente on peut avec la même image obtenir 2 version d'affichage pour des vues ou des templates différent. Ce dont je me rend compte en écrivant cet article 😂.
Du coup ici c'est utilisé pour l'illustration de l'article (template node--article.html.twig ) et l'affichage dans des vues sous forme d'accroche (template node--article--teaser.html.twig)
Et c'est fort de l'installation du module précédent qu'en choisissant des images pour illustrer mes articles que je me rends compte qu'il me faut aussi le module :
Simple Image Rotate (https://www.drupal.org/project/simple_image_rotate) qui permet de faire tourner les images que nos téléphones ont parfois l'art de mettre dans n'importe quel sens...
Attention, ici c'est dans la config du champ qu'il faut cocher la case Enable rotate icon
Sauf que ça ne marche pas chez moi ...
Paragraphs (https://www.drupal.org/project/paragraphs) indispensable pour créer des champs multiples éventuélement réutilisables sur plusieurs types de contenu. Ici par exemple un champ "bloc-texte" qui me permet d'ajouter des blocs à droite ou à gauche de la page. Sauf que pour afficher ces paragraph dans la 1er, deuxième ou troisième colonne j'utilise une vue dans un template twig donc :
Twig Tweak https://www.drupal.org/project/twig_tweak pour insérer une vue avec le code {{ drupal_view('view_name', 'block_name') }} voir ici
Pathauto (www.drupal.org/project/pathauto) permet d'avoir des urls de pages sympas au lieu de node/x ...
La configuration se fait à l'adresse /admin/config/search/path/patterns (pas trouvée dans les menus mais via la liste des modules ...)
Pour avoir l'url /developpement-installation-drupal ici, j'ai créé un motif pour mes articles :
[node:field_categorie:entity:name]-[node:title]
Views Bootstrap (www.drupal.org/project/views_bootstrap) pour avoir des listes avec des designs particuliers comme des diaporamas, des accordéons ...
Je vais poster ici quelques codes ou astuces utilisées lors de la création de mes sites.
Conçu plus comme un pense bête personnel qu'autre chose mais si ça peut vous servir aussi tant mieux.
Block en colonne 3
Auteur multimédia développant pour le web depuis plus de 20 ans et sur Drupal depuis 8 ans je suis également auteur de textes pour le théâtre ou la vidéo.
Je poste sur ce site autant mes astuces de développeur quand j'en ai (ou les solutions que j'ai mis un moment à trouver et que je veux absolument noter quelque part 😊 ).
Je profite aussi de cet espace qui m'appartient pour partager avec ceux qui le souhaitent mes autres créations (photos ? dessins ?) voire mes voyages ou autres loisir.
Développer ce site me permet non seulement d'avoir un espace de création pour mes tests de modules ou fonctions web mais aussi de partager mes "œuvres" sur une plateforme qui m'en garanti les droits contrairement aux réseaux sociaux et leurs conditions générales que nous ne lisons jamais mais dont nous savons tout de même qu'elle nous sont rarement favorables* 😉
* Oui, je sais, cette phrase est un peu longue