Drupal CCK+Views. Types de contenu. Affichage des pages via Views. Création d’une galerie de collaborateurs
Dans la leçon précédente, je vous ai expliqué ce qu’est un node (nœud) dans Drupal. Les nodes correspondent à nos articles de blog, Page, Story. Dans cette leçon, nous allons créer un nouveau type de contenu (Content type) "Employé", ce type de contenu sera utilisé pour créer une liste des employés avec une photo et une description pour chacun d’eux.
Alors, quels modules nous faudra-t-il pour cela :
Drupal CCK
1. CCK (Content Construction Kit) - ce module permet de créer de nouveaux types de contenu, ainsi que d’ajouter divers champs pour saisir des données.
Le module Drupal CCK est tellement volumineux qu’il a été divisé en plusieurs sous-modules. Nous aurons besoin des sous-modules suivants :
- Content - pour créer de nouveaux types de contenu.
- Content Permissions - pour définir les permissions d’édition et de visualisation de notre type de contenu.
- Number - permet d’ajouter un champ numérique au type de contenu, pouvant être utilisé pour un numéro matricule.
- Option Widgets - permet d’ajouter au type de contenu des champs de saisie via choix (case à cocher, liste déroulante, bouton radio).
- Text - permet d’ajouter des champs de texte au type de contenu.
Les autres sous-modules CCK remplissent les fonctions suivantes :
- Content copy - permet de créer des copies de types de contenu existants en copiant leurs champs de saisie.
- FieldGroup - groupe les champs de saisie. Comme nous avons peu de champs, ce sous-module ne nous sera pas nécessaire.
- NodeReference - permet d’ajouter un champ dans lequel on peut indiquer vers quel node fait référence le contenu nouvellement créé, par exemple si nous créons un nouveau contenu "employé", et que cet employé a sa propre page de type Page sur le site, on pourrait alors indiquer un lien vers cette page.
- UserReference - permet d’ajouter un champ indiquant un lien vers un utilisateur. Si des employés étaient enregistrés sur le site, on pourrait créer un lien vers l’utilisateur correspondant lors de la création du contenu "employé".
Enregistrons la configuration des modules. Ensuite, un lien Types de contenu devrait apparaître dans le menu Admin, dans la section Contenu :
Nous ajouterons le type de contenu un peu plus tard, mais commençons d’abord par installer les deux modules suivants.
FileField et ImageField Drupal
2. FileField et ImageField. FileField ajoute un champ de téléchargement de fichier attaché au node. ImageField est un champ de téléchargement de fichier similaire, mais le fichier doit être une image (jpg, gif, png). Installons ces deux modules, nécessaires pour télécharger les photos des employés.
Enregistrons les configurations et passons à l’installation des modules suivants.
Imagecache Drupal
3. ImageCache et ImageAPI. ImageAPI est une API destinée à être utilisée à la place de l’API fournie par le fichier standard image.inc. ImageCache, dans notre cas, nous permettra de créer un traitement préalable, un preset (préréglage) des photos des employés, c’est-à-dire que si nous chargeons des images d’employés avec des largeurs et hauteurs différentes, ImageCache affichera toutes les photos avec des tailles identiques.
On peut aussi utiliser le module lightbox2 pour créer des photos qui s’agrandissent au clic en superposition sur la fenêtre, jusqu’à leur taille originale. C’est très pratique quand les presets sont très petits et que les photos sont difficiles à voir, par exemple s’il y a beaucoup d’employés. Après l’installation de lightbox2, un choix de preset avec effet lightbox est automatiquement ajouté à tous les presets.
4. Le module Views. Le module Views est un constructeur de requêtes à la base de données, qui permet sans connaissance du SQL d’afficher des listes de données obtenues par une requête construite. Installons ce module.
Enregistrons la configuration. Les modules nécessaires à la création de la liste des employés avec photos sont prêts, passons à la création de cette liste.
Création de la liste des employés dans Drupal
Pour commencer, il faut créer un type de contenu "employé". Accédez via le menu d’administration : Contenu - Types de contenu - Ajouter un type de contenu
Notez que le champ Nom sera affiché dans le menu d’administration et doit être rempli en russe et de manière compréhensible, tandis que le champ Type est utilisé par Drupal, donc il doit être rempli en lettres latines sans espaces ni autres signes (l’utilisation du trait de soulignement est possible).
Maintenant, parmi les autres types de contenu, nous avons aussi Employé. Ajoutons des champs à notre nouveau type de contenu pour la saisie des données. Cliquez sur gérer les champs (manage fields).
Dans la ligne Nouveau champ, remplissez tous les champs :
Titre - peut être rempli en russe
Nom du champ (field name) - doit être rempli sans espaces (le trait de soulignement est possible) en lettres latines
Type de données stockées - choisissons fichier (file), puis une liste de widgets possibles s’ouvre, sélectionnez image
Cliquez sur Enregistrer et vous êtes redirigé vers la fenêtre suivante de modification du champ, enregistrez ces paramètres sans modification.
Maintenant, notre type de contenu Employé possède un champ de téléchargement de fichier pour la photo de l’employé. Ajoutons également deux autres champs "Nom complet" et "À propos de l’employé". Pour Nom complet, choisissons le type de données "texte", puis dans la liste qui s’ouvre, Text field. Dans la fenêtre suivante, il faut augmenter la longueur du champ Nom complet au moins à 80. J’ai mis une longueur de 100 caractères.
Pour le champ "À propos de l’employé", choisissons aussi le type de données "texte", mais dans la liste suivante, sélectionnons textarea (plusieurs lignes). Dans la section "Traitement du texte", sélectionnons "texte filtré (l’utilisateur choisit le format d’entrée)".
Je parlerai plus en détail des formats de saisie dans un des prochains articles.
Les champs suivants doivent apparaître :
Notre type de contenu est prêt pour créer le premier employé. Via le menu admin, accédez au lien "Contenu - Créer un contenu - employé"
Ensuite, il faut remplir les données de l’employé exactement comme pour un article de blog, Page ou Story, mais maintenant avec les champs ajoutés : Photo de l’employé, Nom complet, À propos de l’employé :
Vous vous demandez peut-être quoi écrire dans le Titre et le Contenu de l’employé. En fait, le Nom complet duplique le champ Titre, et À propos de l’employé duplique le champ Contenu. En pratique, on peut utiliser le Titre pour saisir nom, prénom et patronyme, et le Contenu pour écrire des informations sur l’employé. J’ai ajouté ces champs pour montrer comment fonctionne CCK. On pourrait élargir le type de contenu Employé avec des champs tels que fonction, temps de travail, heures de présence, bureau, poste de travail, etc.
Enregistrons l’employé créé. Comme je l’ai dit plus tôt, tous les employés seront des nodes, par exemple l’adresse de l’employé que j’ai créé, Vasya, est node/9. Actuellement, l’URL de l’employé s’affiche en latin ou en cyrillique (à cause du module pathauto), mais si vous cliquez sur "Modifier", vous verrez que l’adresse change en node/numéro_du_node/edit.
Donc, nous savons maintenant comment ajouter des employés sur le site, il faut maintenant afficher les employés d’une manière pratique. Commençons par créer un preset, j’imagine que vous avez déjà installé les modules ImageCache et ImageAPI, sinon c’est le moment. Le preset peut être créé en suivant ce lien dans le menu admin : Structure du site - ImageCache - Ajouter un nouveau preset.
Entrez le nom du preset, je conseille d’indiquer la largeur et la hauteur en pixels dans le nom via la lettre latine X. Les actions suivantes sont disponibles pour la création du preset :
- Add Crop - Recadrage de l’image en rectangle, avec décalage et dimensions définis.
- Add Deprecated Scale - Prédécesseur de Scale and Crop. Cette action sera supprimée dans ImageCache 2.1.
- Add Desaturate - Transformation de l’image en niveaux de gris.
- Add Resize - Redimensionnement de l’image en système de mesure exact, en ignorant les proportions.
- Add Rotate - Rotation de l’image.
- Add Scale - Redimensionnement de l’image en conservant les proportions originales (un seul paramètre nécessaire).
- Add Scale And Crop - Redimensionnement en conservant les proportions, puis découpage aux dimensions.
- Add Sharpen - Netteté de l’image par masquage flou.
Nous nous intéressons maintenant à l’action Add scale and crop, sélectionnons-la. Je définirai, comme le titre du preset l’indique, des dimensions d’image de 100 pixels par 100 pixels (sans signe %). Cliquez sur enregistrer et le preset est créé.
Il ne reste plus qu’au module Views de créer la requête qui affichera dans la base de données tous les employés de la société, avec leur photo au format du preset 100 x 100 pixels. Installons le module Views et son sous-module Views UI qui fournit une interface pour travailler avec lui.
Drupal Views
Via le menu Admin, accédez à la liste des vues existantes : Structure du site - Views. Par défaut, plusieurs vues sont déjà configurées : Archive, Commentaires récents, Page d’accueil, Glossaire, Termes de taxonomie, Dernières publications - mais elles sont également désactivées par défaut.
Cliquez sur "ajouter" et créons une vue (view) pour la galerie des employés. Il est préférable de commencer le nom de la vue par le préfixe view_ .
Dans la section Type de vue (View type), indiquez la liste des propriétés des classes à afficher, comme Employé est un node (node traduit ici par Matériel), nous choisissons donc node.
Après avoir cliqué sur le bouton Suivant (Next), nous passons à l’interface utilisateur de Views.
Nous nous intéressons principalement à 4 blocs de l’interface : Arguments, Critères de tri (Sort criteria), Filtres (filters), Champs (fields).
- Arguments - permet de filtrer les enregistrements selon un argument, une valeur provenant de l’URL de la page, par exemple pour node/17, l’argument vaudra 17.
- Champs (fields) - dans cette section, on choisit les champs nécessaires depuis la base de données.
- Critères de tri (Sort criteria) - tri du résultat dans un ordre donné.
- Filtres (filters) - sélection des résultats selon certains paramètres.
Commençons la configuration de notre vue (view, parfois appelée "affichage"). Ajoutons un champ :
Sélectionnons les champs du groupe Taxonomie (Contenu : Nom complet, Contenu : À propos de l’employé, Contenu : Photo de l’employé, ces champs peuvent être dans un groupe séparé appelé Contenu).
La fenêtre de configuration Configure field Contenu : À propos de l’employé peut être laissée sans modification, cliquez sur "modifier". Dans la fenêtre Configure field Contenu : Nom complet, il faut supprimer le titre :
Dans la fenêtre de configuration Configure field Contenu : Photo de l’employé, il faut supprimer le titre et choisir le preset créé précédemment :
Les formats de photo peuvent être :
100X100 - image - simple image sans lien.
100X100 - image liée au node - image avec lien vers le node de l’employé dont c’est la photo.
100X100 - image liée à l’image - image avec lien vers elle-même en taille originale.
Si vous avez installé le module lightbox2, vous pouvez choisir un autre preset :
Après avoir cliqué sur modifier, un aperçu de la page s’affiche.
Pour un affichage correct, il faut maintenant configurer les filtres. Ajoutons un filtre :
Le rendu doit être filtré par type de contenu (Employé) et ne sélectionner que les contenus publiés :
Sélectionnez uniquement les contenus publiés et seulement les Employés.
Changeons l’ordre des champs à afficher :
Cliquez sur le bouton à droite du titre "Champs". Une liste des champs apparaîtra, vous pouvez les déplacer grâce aux poignées à gauche de chaque champ. Les champs inutiles peuvent être supprimés en cliquant sur le signe à droite. Enregistrez les modifications.
Ajoutez encore quelques employés pour voir à quoi ressemble la vue. Il faut maintenant choisir la page où cette vue sera affichée, choisissez "Page" et cliquez sur "ajouter un affichage" (add display).
Il faut maintenant indiquer le chemin où cette vue sera affichée :
Enregistrez les modifications et sauvegardez la vue. Cette vue sera maintenant accessible à l’adresse nom_du_site/sotrudniki.
Dans la prochaine leçon, je continuerai à décrire le module Views, la sortie en bloc et l’amélioration de la liste des employés.