Custom fields

Custom fields / champs personnalisés

Ces champs vont te permettre de modifier ton interface admin.

Imagine que tu as une page présentant une équipe, et que tu souhaites ajouter des informations spécifiques pour chaque membre comme : une photo, un nom et une brève description. Grâce aux "custom fields", c'est un jeu d'enfant, tu vas définir/créer tes champs et les attribuers aà la/aux pages sur la/lesquelles tu auras besoin des infos et le tour est joué ! Ci-dessous, je t'explique comment le faire concrètement :

1. Imaginons, vous avez une page "Team" qui affiche chacun des membres de l'équipe. Tu pourrais à priori, te rendre dans l'article et intégré les éléments dans le texte de l'article tout simplement.

2. Vous pourriez le faire de cette manière, sauf que vous allez vite vous retrouvez bloqué pour manipuler ces éléments de manière flexible.

3. Regardez de plus près le code, vous avez une class [[com-content-article__body]] sur votre article...seulement cette classe va se retrouver sur tout vos articles, des images, des titre H3 et des paragraphes, vous en aurez sur tout vos articles.

Tip: Au cas où, vous me diriez : "Oui mais on peut ajouter une classe à la page et cibler notre élément en CSS avec : [[.ma-page-equipe .com-content-article__body h3]]"

et je réponds :" Oui vous pouvez ! Mais que ce passe-t-il si vous souhaitez une introduction à la société avant la présentation de votre équipe ? Que se passe-t-il si vous ajoutez des images qui présente vos locaux avant d'introduire votre équipe ?" Vous serez bloqué pour cibler de manière précise les images concernant l'équipe et les images concernant les locaux ! Heureusement, il y a toujours une solution :)

Field groups / groupe de champs

4. Retourne dans l'admin de joomla, ferme-t-on article et va sous field groups.

Tip: On commencer par créer un [[field groups]].

Cette étape va nous permettre de regrouper tous les champs qu'on va créer pour afficher les informations des membres de l'équipe. Tout sera assembler sous un nom précis et logique, de cette manière, le client qui aura besoin de modifier les membres de son équipe n'aura pas besoin de se poser de question, où de chercher pendant 10 minutes l'endroit où se trouvent ces infos !

5. Retourne dans l'admin de joomla, ferme-t-on article et va sous field groups et ajoute en un nouveau.

6. Entre un nom précis et claire pour que le client sache de quoi il retourne dans cet onglet, dans ce cas, j'ai opté pour "Team details", soit les détails de l'équipe. Sauvegarde et ferme la page.

Fields / champs

7. Ton groupe à bien été crée. Maintenant, on va se rendre sous fields pour créer chacun des champs nécessaire aux informations des membres.

8. Ajoute un titre claire pour le nom de ton champs. Ici, je vais créer le champs photo pour les membres de l'équipe, je l'ai donc nommé [[Photo - team]]. Sous le type, comme on c'est lié à une photo, on va choisir un champ de type [[media]].

9. On va activer le champ [[only use in subform]]. Le subform est un champs qui permet de créer une liste de champs, ce qui est particulièrement pratique quand on a plusieurs fois les mêmes champs à remplir. Dans ce cas, une équipe, on pourra donc ajouté / supprimer des membres à tout moment. Cet fonctionnalité pourrait être transposé à une liste de services, de prestations, de logo partenaire, etc...

10. Si besoin, tu peux ajouter ici une class qui s'appliquera automatiquement sur la balise [[img]] de l'image importé.

11. Sauvegarde et ferme ton champs.

12. Tu vas répété cet étape pour tous les types de champs que tu pourrais avoir besoins. Soit dans cet example, j'ai crée un champ Name - team de type text et un autre Description - team de type editor.

13. Sous l'onglet [[Options]] , tu peux paramétrer plusieurs champs à ta guise. Notamment, le champs [[display class]]. Celui-ci va ajouter autour de ton champs la classe de ton choix. Dans cet exemple, j'ai ajouté la classe :

• [[team-photo]] dans le champs photo
• [[team-name]] dans le champs nom
• [[team-description]] dans la description

De cet manière là, il me sera très facile de me repéré dans le CSS et savoir ce que j'édite. Je vous montre plus loin, où ces classes se disposent dans l'HTML.

14. Pour chacun des champs, tu peux également décider d'afficher ou non le label, dans ce cas, choisi de le désactiver.

Le subform / sous-formulaire

15. Une fois que tu as crée tous les champs de ta liste, tu vas crée un dernier champs de type [[subform]] auxquels on ajoutera tous les autres champs.

16. Par défaut, ton champs sera visible sur chacun des articles que tu vas créer. Si l'application de tes champs est particulier à un type de page, tu peux ajouter la/les catégories que ça concerne. Dans ce cas, les champs ne concerneront que les pages de type [[Team]] par conséquent, les champs seront visible que dans les articles de cette catégorie en particulier.

17. Ensuite, on va ajouter les champs au [[subform]] tous les champs nécessaire au détails du membre. Soit tous les champs qu'on vient de créer.

18. Sous [[field]], vous allez pouvoir choisir le/les champs concernés et l'ordre dans lequel ils devront apparaître sous l'article.

19. Dans ce cas, on va commencer par l'image, soit le champ [[Photo - team]] qu'on a crée plus tôt.

20. Ajoute les champs les un après les autres jusqu'à avoir les éléments complet. Dans ce cas, on aura besoin du [[name]] et de la [[description]] .

21. On va finir par choisir le [[field group]] qu'on a crée au départ, soit le [[Team details]] dans ce cas.

22. Tu peux ensuite sauvegarder et ferme ton champs avant de retourner sous tes articles.

23. Comme on a sélectionner la catégorie [[Team]], le seul article où seront visible les dernières étapes est sous l'article [[Team]].

24. Ouvre cet article et l'onglet [[Team details]] apparaît :D ! Le nom [[Team details]] fait donc références aux [[field goups]] qu'on a crée dans les premières étapes. Sous cet onglet tu trouveras le [[subform]] avec les 3 champs crée préalablement !

25. Tu peux ajouter le nombre d'éléments nécessaires en cliquant sur le petit plus de la liste.

26. Tu peux créer le nombre d'éléments nécessaire et à chaque clique sur le petit plus, il te créera une nouvelle ligne avec les champs que tu auras préalablement créer et lié à ce [[subform]].

27. Rempli toutes tes données avant de sauver ton article.

Resultat dans front-end

28. Rends toi sur ton site, qui devrait être visible depuis [[localhost:8888]]. Rend toi sur la page où tu as ajouté tes données, dans ce cas, la page [[team]]. Ouvre ton inspecteur et sélectionne la liste ou apparaissent tes données.

29. Tu peux constater dans l'HTML que tu as maintenant un contenu bien spécifique qui a été ajouter et celui-ci comprend des classes faciles à cibler, maintenant à toi de jouer en CSS pour obtenir le résultat que tu souhaites :) !

Tip: Par défaut, joomla t'ajoute le contenu avant le corps de l'article, cet aspect est personnalisable dans le champs [[Automatic Display]] sous l'onglet [[Options]] de ton [[field]].