Written by Le présent article tente de compiler un maximum d’informations sur les Custom Fields (Champs Personnalisés) introduits dans Joomla! 3.7, qui ouvrent beaucoup de perspectives.
Il complète utilement l’article de présentation générale des Custom Fields (traduction de l’article de Sander Potjer publié dans le Webdesigner Magazine NL #94), disponible dans ce même numéro du Cinnk Magazine.
Il se veut aussi complet que possible, avec même parfois des sources dans différentes langues.
Le sujet est neuf et nombreux sont les articles et extensions qui continuent à sortir. Aussi, n’hésitez pas à partager vos découvertes dans les commentaires ci-dessus ou en me contactant directement.
Le présent article tente de compiler un maximum d’informations sur les Custom Fields (Champs Personnalisés) introduits dans Joomla! 3.7, qui ouvrent beaucoup de perspectives.
Il complète utilement l’article de présentation générale des Custom Fields (traduction de l’article de Sander Potjer publié dans le Webdesigner Magazine NL #94), disponible dans ce même numéro du Cinnk Magazine.
Il se veut aussi complet que possible, avec même parfois des sources dans différentes langues.
Le sujet est neuf et nombreux sont les articles et extensions qui continuent à sortir. Aussi, n’hésitez pas à partager vos découvertes dans les commentaires ci-dessus ou en me contactant directement.
Les ressources générales
Commençons par le début : le site officiel de la Documentation Joomla
FR https://docs.joomla.org/J3.x:Adding_custom_fields/fr
EN https://docs.joomla.org/J3.x:Adding_custom_fields
Portail Joomla.fr et Joomla Community Magazine
Episode 1
FR https://www.joomla.fr/actualites/cp-episode-1-cas-utilisation-champs-personnalises
EN https://magazine.joomla.org/item/3326-how-far-can-we-go-with-joomla-and-custom-fields
Episode 2
FR https://www.joomla.fr/actualites/cp-episode-2-comment-gerer-ses-champs-personnalises
EN https://magazine.joomla.org/item/3330-custom-fields-episode-2-how-to-manage-your-custom-fields
Joomla Extension Directory
beginning 2018, a new Category called « Custom Fields » has been added to the JED (Joomla Extensions Directory), which is an excellent thing https://extensions.joomla.org/category/authoring-a-content/custom-fields/ (but note that not all authors have moved their extension to that Category, especially if the main purpose of the extension fits better in another Category)
Article de survol (FR)
https://cinnk.com/magazine/avril-2017/930-joomla-3-7-sur-les-champs
https://cinnk.com/magazine/juillet-2017/977-les-champs-personnalises-dans-joomla(traduction de l’article de Sander Potjer, version originale NL : sanderpotjer.nl/customfields)
Articles de survol (EN)
https://www.joomlashack.com/blog/tutorials/custom-fields (intro)
https://www.joomlashack.com/blog/tutorials/fields-joomla (détails)
https://www.joomshaper.com/blog/how-to-use-joomla-3-7-custom-fields
https://www.joomlabeginner.com/blog/tutorials/65-how-to-add-custom-fields-to-joomla-articles
https://www.joomla-monster.com/documentation/joomla-tutorials/custom-fields-in-joomla-3-7
Articles de survol (DE)
https://www.hosteurope.de/blog/joomla-overrides-und-custom-fields-ein-dreamteam by Viviana Menzel
https://www.hanser-elibrary.com/isbn/9783446440159 « Joomla! 3 Professionelle Webentwicklung. Aktuell zu Version 3.7 » by David Jardin and Elisa Foltynwith a Chapter « Eigene Felder » (Custom Fields) : https://www.hanser-elibrary.com/doi/pdf/10.3139/9783446440883.016
« How to Add Custom Fields to Joomla! Contact Forms » (EN)
https://www.joomlashack.com/blog/tutorials/contact-custom-fields (voir ci-dessous pour plus de développements)
Elisa Foltyn a publié sur son blog un excellent tutoriel détaillé sur comment créer son propre plugin de champ personnalisé.Il est disponible en anglais et en allemand :
Tutorial: Build your own custom field plugin https://coolcat-creations.com/en/blog/tutorial-build-your-own-custom-field-plugin
Tutorial: Erstelle ein eigenes Custom Field Plugin https://coolcat-creations.com/blog/tutorial-erstelle-ein-eigenes-custom-field-plugin
« Custom Fields in Joomla! 3.7 » (DE)
http://www.dev-insider.de/custom-fields-in-joomla-37-a-615010/
Pour mémoire, avant l’introduction des Custom Fields, il était bien sûr déjà possible pour un « développeur » de créer « manuellement » des champs :
https://docs.joomla.org/Creating_a_custom_form_field_type
Les Custom Fields présentés lors de conférences
Joomladay DE (Nürnberg, 9-10/11/2018)
https://www.joomladay.de 2 topics
Elisa Foltyn a présenté en détail comment réaliser un « diagramme de gantt » (un tableau de planning) sur base des Champs Personnalisés Répétables (Repeatable Fields, introduits par J!3.9) et en utlilisant des overrides : https://coolcat-creations.com/slides/jd18de/jd18de.pdf https://github.com/coolcat-creations/joomla-timeline
Axel Hartmann (Continga) a traité de « Custom Fields Type Subform » (« Custom Fields verschachtelt ») https://www.slideshare.net/continga/joomladay-germany-2018-custom-fields-type-subform https://www.youtube.com/watch?v=XMVAvkEQX5o
JoomlaDay FR (Paris, 18-19/05/2018)
https://www.joomladay.fr/20182 topics
Les Overrides de Layout : utilisez la puissance et la souplesse de Joomla!(NDLR : utile pour après exploiter les Custom Fields dans les layouts) https://www.joomladay.fr/2018/programme/conferences/les-overrides-de-layout-utilisez-la-puissance-et-la-souplesse-de-joomla
La beauté et la puissance des Custom Fields couplés aux Overrides de Layout https://www.joomladay.fr/2018/programme/conferences/la-beaute-et-la-puissance-des-custom-fields-couples-aux-overrides-de-layout
JoomlaDagen NL (Eindhoven, 13-14/04/2018)
https://www.joomladagen.nl/programma 2 topics :
Custom Fields : how far can you go ? https://www.joomladagen.nl/presentaties/custom-fields-how-far-can-you-go https://slides.woluweb.be/jd18nl/cf
Create your own custom Field Plugin (Elisa Foltyn) https://www.joomladagen.nl/presentaties/create-your-own-custom-field-plugin https://coolcat-creations.com/slides/jd18nl/slides.pdf
Joomla Camp DE (Joomla Unconference – 03/02/2018 – DE)
https://www.joomlacamp.de
Ein EIGENES custom field Erstellen https://coolcat-creations.com/slides/jc18de/slides_jc18de.pdf
Joomla User Group Provence-Marseille (09/01/2018 – FR)
Open forum Custom Fields (vidéo 1h48) https://www.facebook.com/groups/833179530125274/permalink/1479133712196516/
Joomla World Conference Rome (17-19/11/2017 – EN)
Joomla Custom Fields – Using Them to Their Full Potential – by Geraint Edwards https://conference.joomla.org/schedule/joomla-custom-fields-using-them-to-their-full-potential.html https://www.youtube.com/joomla
JoomlaDay DE (22-23/09/2017 – EN)
Build your own Custom Field Plugin – by Elisa Foltyn https://www.joomladay.de/sprecher?view=session&id=2684
Joomladay UK (08/07/2017 – EN)
An in depth look at Custom Fieldspar Allon Moritz, le créateur de DPFields, qui a été intégré dans Joomla! et amélioré sous le nom de Custom Fields
Synopsis : http://www.joomla-day.uk/component/timetable/event/an-in-depth-look-at-custom-fields
Vidéo : https://www.youtube.com/watch?v=Aaql8u4ZLDA
Easy template overrides with Custom Fieldspar Tony Partridge de EasyLayouts.net, une extension payante
Synopsis : http://www.joomla-day.uk/component/timetable/event/overrides-made-easy
Vidéo : https://www.youtube.com/watch?v=1ZsGzu8LTPg
J&Beyond (02-04/06/2017 – EN)
http://jandbeyond.org/programme.html?view=session&id=405&return=L3Byb2dyYW1tZS5odG1s (synopsis)par Geraint Edwards de EasyLayouts.net, une extension payante
https://www.youtube.com/watch?v=9_EhniR6FE4 (vidéo)
JoomlaDay Marseille (12-13/05/2017 – FR)
https://www.joomladay.fr/presentations-a-telecharger/decouvrez-le-potentiel-des-champs-personnalises-de-jooma-3-7 (synopsis + vidéo)par Jean-Marc Bouillé
JoomlaDay Austria (02-03/12/2016 – EN)
https://www.youtube.com/watch?v=F_Ni15icn1U (vidéo – 38 min.)par Allon Moritz, le créateur de DPFields, qui a été intégré dans Joomla! et amélioré sous le nom de Custom Fields
Joomla World Conference (11-13/11/2016 – EN)
https://www.youtube.com/watch?v=fgDoZsD71H8 (vidéo – 41 min.)par Marco Dings
JoomlaDay Germany (16-17/09/2016)
Custom Fields in Joomla! for the end users https://www.youtube.com/watch?v=I4DzrGMoLqE (slides EN – langue parlée DE)
Custom Fields in Joomla! for developers https://www.youtube.com/watch?v=eeHbN0b4aoQ (slides EN – langue parlée DE)
JoomlaDay UK (13/02/2016)
Custom Fields 4 Joomla par Marco Dings https://fr.slideshare.net/RCheesley/custom-fields-in-joomla-joomladay-uk-2016-marco-dings https://www.youtube.com/watch?v=KDh1IPuZAVA
Les plugins de Custom Fields
Comme on s’en aperçoit rapidement en survolant les ressources ci-dessus, les Custom Fields ouvrent… le champ des possibles.
En natif, Joomla! embarque une quinzaine de types de champs différents.
Techniquement, il s’agit de plugins. On peut donc désactiver un type de champ simplement en désactivant le plugin correspondant (filtrer les plugins sur le type « fields » pour directement voir tous les types disponibles).
Et puisque les types de champs sont des plugins, cela signifie aussi qu’il est facile d’en ajouter sur un site. De nombreux nouveaux types vont encore apparaître… et sont déjà apparus (parfois ils sont gratuits, parfois payants). Voici ceux déjà disponibles :
Par Allon Moritz (gratuit)
Allon Moritz, le père des Custom Fields, a mis à disposition plusieurs Custom Fields sur son Github : https://github.com/Digital-Peak/DPFields. On y trouve notamment les « DPFields » suivants :
champ Gallery (galerie d’images)
champ Map (Google Map)
champ Article (pour lier un article à un autre)
champ Media (avec plus d’options que le champ par défaut de Joomla)
Par Elisa Foltyn (gratuit)
blog view with Tag & Custom Field Filter (un override de la vue blog, mettre les fichiers dans /components/com_content/views/category/tmpl) https://github.com/coolcat-creations/blog-tagfilter
champ carte OpenStreetMap https://github.com/coolcat-creations/plg_fields_osm
champ YouTube with lazyload https://github.com/coolcat-creations/cccyoutubefield/
champ Google Invisible Recaptcha pour l’enregistrement utilisateurs + le formulaire de contact https://github.com/coolcat-creations/cccinvisiblerecaptcha/
champ url avec icône Font-Awesome https://github.com/coolcat-creations/plg_fields_iconlink/
champ « voyage » – affiche une adresse, une carte ou une gallerie flickr à partir de l’input utilisateur (avec autocomplete) https://github.com/coolcat-creations/plg_fields_travel
affiche les images d’un dossier donné dans un carrousel bootstrap 4 https://github.com/coolcat-creations/simpleBootstrapSlider
affiche un champ d’adresse avec « autocomplete d’Algolia » https://github.com/coolcat-creations/plg_fields_addresscomplete
Par Tassos Marinos (version gratuite et version payante àpd € 19)
https://www.tassos.gr/joomla-extensions/advanced-custom-fields
Déjà disponible au moment de la rédaction
YouTube Field
Google Maps Field
Vimeo Field
DailyMotion Field
Facebook Video Field
HTML5 Video Field
HTML5 Audio Field
SoundCloud Field
True/False Field
Timepicker Field
Currency Field
Country Field
Bing Maps
IFrame
Progress Bar
Download Button
Module Field (Pro only)
Disponible bientôt (ou entre-temps déjà disponible)
File Upload Custom Field
Facebook Page Like Custom Field
Twitter Custom Field
WhatsApp Custom Field
Repeater Custom Field
Countdown Custom Field
Flickr Custom Field
QR Code Custom Field
Gravatar Custom Field
Par RegularLabs
En octobre 2017, RegularLabs sort son 1er plugin de Champ Personnalisé (NB : par ailleurs, les Custom Fields sont aussi intégrés dans Article Anywhere)
Articles Field, qui permet de faire des liens vers d’autres articlesCe Champ Personnalisé est extrêmement facile/puissant/configurableOn peut typiquement l’utiliser sur un site où il y aurait d’une part des Livres, d’autres part des Auteurs : on peut ainsi facilement associer des Auteurs à des Livres et réciproquement https://www.regularlabs.com/extensions/articlesfield
NB : pour un usage (ultra-)avancé, si on souhaite avoir un Custom HTML Output du Custom Field différent selon telle ou telle page du site, c’est possible en combinant avec ReReplacer : https://www.regularlabs.com/forum/articlesfield/45206-custom-html-output-how-to-have-2-different-outputs-for-example
Articles Anywhere, qui permet dans sa version Pro d’utiliser les Custom Fields
intégration des Custom Fields https://www.regularlabs.com/extensions/articlesanywhere/tutorial#custom-fields
à noter :
il est possible de filtrer sur les Custom Fields (pour les valeurs simples et les listes) https://www.regularlabs.com/extensions/articlesanywhere/tutorial#filters
mais il n’est pas possible de trier sur les Custom Fields(sauf éventuelllement à combiner avec Sourcerer pour insérer son propre code PHP, voir p.ex. https://www.regularlabs.com/forum/articlesanywhere/42644-limit-articles-by-date#70063)
Par Stereonomy
Related Articles Free https://www.stereonomy.com/joomla-products/item/related-articles-custom-field
Related Articles Pro (coming soon)
Bar Chart Free https://www.stereonomy.com/joomla-products/item/bar-chart-custom-field-for-joomla
Bar Chart Pro (€ 9) https://www.stereonomy.com/joomla-products/item/bar-chart-custom-field-pro-for-joomla
Par Joomill
(version gratuite et version payante à € 10. Voir les différences sur https://www.joomill-extensions.com/extensions/custom-fields-vimeo-plugin/compare)
Youtube https://extensions.joomla.org/extensions/extension/multimedia/multimedia-players/custom-fields-youtube/
Vimeo https://extensions.joomla.org/extensions/extension/multimedia/multimedia-players/custom-fields-vimeo/
Slideshare https://www.joomill-extensions.com/downloads/custom-fields-slideshare-plugin
Par le JUG Nuremberg
Joomla! CustomField – Displays jpg-images from a folder within a gallery and lightbox (uikit-template) https://github.com/JUG-Nuremberg/jugnbg_uikitgalleryfield https://github.com/coolcat-creations/jugnbg_uikitgalleryfield
Par Nordmograph (payant € 14)
OpenStreetMap Custom Field https://www.nordmograph.com/extensions/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=192&virtuemart_category_id=7&Itemid=58
Google Map Custom Field https://extensions.joomla.org/extensions/extension/maps-a-weather/gmap-custom-field/ https://www.nordmograph.com/extensions/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=175&virtuemart_category_id=7&Itemid=58
Il est même possible d’obtenir une carte Google Map multi-points en combinant les différentes extensions
Le custom field pour assigner une localisation à un article. Le champs affiche une carte dans le formulaire, où on peut cliquer ou spécifier une adresse.(l’autre plugin ‘Itin’ permet quant à lui, lui d’assigner des itineraires plus complexes à un article.)
Geommunity Lite (composant + module) pour afficher une carte (dont les marqueurs sont chargés par différents plugins) (9€)
Le plugin qui « fait le pont » en allant chercher les articles localisés pour les afficher dans la grande carte (gratuit). Sur la carte, on aura les marqueurs aux emplacements des articles et une « infowindow » avec des infos (basiques + custom fields) sur l’article
Itinerary Map Custom Field https://extensions.joomla.org/extensions/extension/maps-a-weather/maps-a-locations/itinerary-map-custom-field/
Bitcoin And Cryptocurrencies Custom Field https://extensions.joomla.org/extensions/extension/e-commerce/donations/bitcoin-and-cryptocurrencies-custom-field/
Par EasyLayouts (payant, dans le cadre de l’extension EasyLayouts)
https://www.easylayouts.net/
Related Article
Managed Location (en lien avec JEvents)
Par Lomart
LightboxSur le forum, Lomart a posté un exemple de plugin qu’on peut développer soi-même pour gérer une demande particulière (dans le cas d’espèce, un lien lightbox sur une image) https://forum.joomla.fr/showthread.php?220731
Par Christian Hent
Un plugin pour insérer un champ HTML5Media https://github.com/christianhent/plg_fields_jugnmedia/tree/master
Par JoomlaXTC
HTML5 Audio Custom Field https://www.joomlaxtc.com/joomla-extensions/audio-custom-field
HTML5 Video Custom Field https://www.joomlaxtc.com/joomla-extensions/video-custom-field
YouTube Custom Field https://www.joomlaxtc.com/joomla-extensions/youtube-custom-field
Progress Bar Custom Field https://www.joomlaxtc.com/joomla-extensions/progress-bar-custom-field
Par Sergio Iglesias
SlideShare Custom Field https://sergiois.github.io/cfslideshare.html
Gist Custom Field (to integrate Gist of GitHub) https://sergiois.github.io/cfgist.html
Instagram Custom Field https://sergiois.github.io/cfinstagram.html
PayPal Me Custom Field https://sergiois.github.io/cfpaypalme.html
iVoox Podcast Custom Field https://sergiois.github.io/cfivoox.html
Par FireCoders
Econa for Joomla : en bref, des images responsive (plusieurs tailles d’images servies selon la taille de l’écran) sous forme de champ personnalisé Upload, resize, crop and edit images for Joomla and K2. Integrates with Joomla Custom Fields providing responsive images, retina images, automatic image resizing, multiple image sizes, custom image names, image editor and many other great features in a single extension! https://extensions.joomla.org/extensions/extension/photos-a-images/images/econa-for-joomla-articles-and-k2-items/ https://www.firecoders.com/joomla-extensions/econa
Showtime Image Gallery Showtime Joomla Gallery is the most modern, elegant and simple image gallery component for Joomla! The only Joomla gallery that supports custom fields and live previews right into the article editor! https://www.firecoders.com/joomla-extensions/showtime-image-gallery https://extensions.joomla.org/extensions/extension/photos-a-images/galleries/showtime-image-gallery/
Par Cory Webb
CW Field Display : pour afficher un champ « n’importe où » With CW Field Display, you can either set a specific context and item ID in the module parameters, or allow it to use the current page’s context and item ID. You can also set specific fields or field groups to be displayed or allow it to display all custom fields. This module gives you greater control over how and where you display custom fields on each page because it makes it possible to display custom fields outside of the component’s output. https://cwextensions.com/extensions/cw-field-display
Par Roland Dalmulder
CSV Improved : en tant que tel, il s’agit d’une extension permettant d’importer/exporter les articles/utilisateurs/… vers/depuis son site Joomla. Depuis juin 2017, il intègre également les champs personnalisés https://csvimproved.com/news/2635-csvi-pro-7-2-0-released https://csvimproved.com/support/tutorials/278-joomla-custom-fields/2938-joomla-custom-fields https://csvimproved.com/support/tutorials/249-joomla-content
Par designs.ch
nx-YouTube : un champ persoonalisé pour intégrer des vidéos YouTube responsives en exploitant toutes les possibilités de l’API v3 de YouTube https://nx-designs.ch/index.php/projekte/joomla-extensions/nx-youtube-cust-field
DP Calendar
DP Calendar étant développé par le père des Custom Fields, il était logique qu’elle les intègre https://joomla.digital-peak.com/products/dpcalendar
Par Acymailing
Dans sa version 5.9, AcyMailing intègre les Custom Fields, comme indiqué sur le changelog :
Joomla article custom fields handled when inserting articles
Joomla user custom fields handled in user information insertion and mass actions
Illustration :
Dans sa version 5.10, Acymailing va encore plus loin :
The Joomla custom fields can now be inserted in a custom plugin template using the syntax {custom:my_field}
OS Downloads de JoomlaShack
L’extension OS Downloads de JoomlaShack permet de proposer en téléchargement des fichiers (pdf, …) en échange de l’adresse email du visiteur.
En janvier 2018, la possibilité d’ajouter des Custom Fields a été introduite. Plus d’informations sur
https://www.joomlashack.com/docs/osdownloads/collect-user-data/
https://www.joomlashack.com/blog/joomlashack/custom-fields-osdownloads/
PWT Image
PWT Image de Perfect Web Team est une extension payante permettant notamment de redimensionner/retailler les images et p.ex. de forcer un ratio donné.
Depuis le 20.10.2018, il peut être utilisé comme Custom Field
https://extensions.perfectwebteam.com/pwt-image
Canonical URL
Il ne s’agit pas ici d’une extension, mais d’un exemple d’utilisation des Custom Fields proposé par Daniel Morell…. pour créer une URL canonique sur son site Joomla en natif
Explication détaillée : https://www.danielmorell.com/blog/how-to-create-joomla-canonical-tags
Référence à ce sujet sur le frorum francophone : https://cinnk.com/magazine/juillet-2017/960-custom-fields-bonus
Les Template Overrides et les Alternate Layouts en général
Lorsqu’on crée des Custom Fields, on peut les faire afficher de plusieurs manières :
automatiquement, p.ex. avant/après le contenu de l’article
manuellement n’importe où dans un article grâce à la syntaxe
{field ID}
où ID est l’identifiant du champ, p.ex. 1
mais si on veut aller plus loin, on peut aussi utiliser les Overrides (ou les Alternate Layouts, lesquels sont des également surcharges mais qui sont appliquées à la demande et pas d’office)
Même si vous n’avez jamais réalisé d’Override ou d’Alternate Layout, vous allez découvrir que cela est finalement assez facile et cela va vous permettre de tirer le plein potentiel des Custom Fields au niveau de la présentation de votre site.
Pour cette raison, nous compilons ci-dessous une série de ressources intéressantes pour faire le tour de la question.
JoomlaDay Paris 2016
Yann Gomerio et Cédric Keiflin avaient fait une excellente présentation sur les “surcharges et les layouts alternatifs”
Présentation et vidéo https://www.joomladay.fr/2016/programme/templates-et-surcharges-les-secrets-des-concepteurs
JoomlaDay Netherlands 2017
Par Hans Kuijpers, sur une présentation d’Elisa Foltyn
OSTraining
The 13 Best Tutorials on Joomla! Template Overrides (EN) https://www.ostraining.com/blog/joomla/list-of-ostraining-resources-on-joomla-teamplate-overrides
Tutoriel vidéo (EN – payant) https://www.ostraining.com/blog/news/template-overrides
Livres
Cédric Keiflin : « Création de template Joomla! 3 » (FR / 320 pages / € 10) couvre très bien notamment le sujet des Overrides et des Alternate Layouts https://www.joomlack.fr/documentations-tutoriels-joomla/livre-de-creation-de-templates
David Jardin & Elisa Foltyn : « Joomla! 3: Professionelle Webentwicklung. Aktuell zu Version 3.7 » (€ 35, sortie prévue le 11/09/2017) https://www.amazon.de/Joomla-Professionelle-Webentwicklung-Aktuell-Version/dp/3446440151/ref=sr_1_1?s=books&ie=UTF8&qid=1497815721&sr=1-1&keywords=Elisa+Foltyn (livre uniquement en allemand pour l’instant. Pourquoi pas une traduction p.ex. de certains chapitres ? Prenez contact avec les auteurs)
Changer le format de la date (champ personnalisé « Calendrier ») sans même faire d’override
Si on veut changer le layout d’une page, on va devoir typiquement devoir effectuer un override.Mais s’il s’agit simplement de changer p.ex. le format de la date du champ personnalisé « Calendrier », il y a une technique nettement plus simple et rapide :
… le format date du champ personnalisé « Calendrier » est en effet simplement modifiable à partir du menu “Langues: Substitutions de traduction”de Joomla avec la chaîne “DATE_FORMAT_LC4” pour la date et “DATE_FORMAT_LC5” pour la date et l’heure.
Donc si on veut changer le format de date qui par défaut est en Y-m-d il suffit de la remplacer avec d-m-Y. Si on veut avoir plus de valeurs pour la fonction date, on les retrouve ici.
De plus, cela permet d’avoir un format de date adapté à chaque langue/région du monde (exemple : d-m-Y en France mais m-d-Y aux Etats-Unis)
Les Overrides dans le cadre des Custom Fields
Maintenant que le décor est planté, on peut voir comment concrètement réaliser un Override dans le cadre des Custom Fields.
Documentation officielle
https://docs.joomla.org/J3.x:Adding_custom_fields/Overrides/fr
En particulier, la présentation d’Elisa Foltyn (#jd17nl) évoque spécifiquement le cas des Custom Fields à partir du slide 37 (NB : c’était juste avant la sortie officielle des Custom Fields et certains exemples de code doivent entre-temps être adaptés, cfr infra)
Je profite d’ailleurs de l’occasion pour remercier ici Elisa Foltyn avec qui j’ai pu échanger directement au sujet de l’utilisation des Custom Fields dans les Overrides et qui m’a permis de compléter de manière substantielle ce dossier sur une série de points.
NB : vous aviez testé les Custom Fields dans des Overrides avant la sortie officielle (p.ex. dans les Release Candidates), sachez p.ex. que « fields » a été rebaptisé « jcfields » au moment. Exemple :
$this->item>fields est devenu $this->item>jcfields
Les Overrides dans le cadre des Custom Fields – concrètement
Comment afficher tous les champs à un endroit donné via une boucle
Override en utilisant le FieldsHelper :
<?php foreach ($this->item->jcfields as $field) : ?> <?php echo FieldsHelper::render($field->context, ‘field.render’, array(‘field’ => $field)); ?><br /><?php endforeach ?>
Raw override (brut, sans mise en forme) :
<?php foreach ($this->item->jcfields as $field) : ?> <?php echo $field->label . ‘:’ . $field->value; ?><br /><?php endforeach ?>
Comment afficher un seul champ
Par exemple, le champ ayant l’ID 9 :
Ingrédients : <?php echo $this->item->jcfields[9]->value; ?>
Encore mieux : d’abord vérifier si le champ est existe pour l’article (ou le contact, …)
<?php if (isset($this->item->jcfields[9])): ?> <?php echo $this->item->jcfields[9]->value; ?><?php endif; ?>
Dans certains cas, on pourrait vouloir utiliser !empty pour n’afficher un champ que s’il a une valeur (par exemple pour les champs qui ont une valeur par défaut)
<?php if (!empty($this->item->jcfields[9]->value)): ?>
NB : pour avoir la valeur brute (raw value) et pas la valeur avec rendu, il suffit de remplacer value par rawvalue dans le code.
Comment afficher le bloc de tous les champs
<?php echo FieldsHelper::render(‘com_content.article’, ‘fields.render’, array(‘item’ => $this->item, ‘context’ => ‘com_content.article’)); ?>
Comment utiliser les Noms (alias) dans les Overrides
Au quotidien, pour une meilleure lisibilité du code, on peut préférer utiliser les Noms des Custom Fields plutôt que leur ID (attention cependant à la cohérence si vous changez en cours de route le Nom de certains champs)
Dans votre Override, il suffit d’ajouter la correspondance entre ID et Noms comme suit…
<?php $customFields = $this->item->jcfields; foreach ($customFields as $customField){ $customFields[$customField->name] = $customField; }?>
… et dans la suite du code, vous pourrez alors écrire simplement
Ingrédients : <?php echo $customFields[‘mes-ingredients’]->value; ?>
Déboguer dans un Override
Quand on est occupé dans un (Template ou Layout) Override et que l’on souhaite déboguer, il peut être pratique d’afficher tous le détail concernant un champ donné.
Dans ce cas, on peut utiser une des deux lignes suivantes, dans le cas d’un champ ayant l’ID 9 (NB : la balise « preformatted » permet d’afficher le tout de manière plus lisible)
<pre><?php var_dump($this->item->jcfields[9]); ?></pre><pre><?php print_r($this->item->jcfields[9]); ?></pre>
Poser des conditions sur le type de champ
Avec quelques connaissances, on peut rapidement aller plus loin dans la personnalisation, comme par exemple ici on où met une condition sur le type de champ (pour le champ ayant l’ID 1)
<?php// Affiche seulement si le Type du Champ est Text if ($this->item->jcfields[1]->type === ‘text’) { echo ‘<h1>This is a text field.</h1>’; }?>
Créer un Custom Field de type SQL permettant de sélectionner un ou plusieurs articles (et les transformer en liens)
Pour ce faire, créons tout d’abord un Custom Field de type SQL, avec la requête suivante (qui va afficher tous les articles du site d’une catégorie donnée, triés par ordre alphabétique)
select id as value, title as text from #__content WHERE state = 1 and catid = 10 ORDER BY title ASC
Dans l’exemple présent, je donne au champ comme Nom articles-lies et j’autorise même les sélections multiples.
Sur le site, je souhaite que tous les articles sélectionnés se transforment en hyperlien vers ces articles. Pour réaliser cela facilement, je peux p.ex. utiliser l’extension Articles Anywhere de Regular Labs (NB : la version Pro permet d’insérer plusieurs articles, la version Free permet d’insérer un seul article à la fois)
Dans mon Override, je vais alors insérer le code suivant :
{articles <?php echo str_replace(‘, ‘, ‘,’, $customFields[‘articles-lies’]->value); ?>}[link][title][/link]<br />{/articles}
NB : par défaut, en cas de sélection multiple, il y a un espace après la virgule qui sépare les différentes valeurs. Nous supprimons cet espace avec la fonction str_replace afin de supprimer cet espace et respecter la syntaxe de Articles Anywhere.
Lien vers un seul article et sans utilisation d’une extension
Si on souhaite seulement faire un lien vers un seul article et qu’on ne souhaite pas utiliser d’extension, on peut p.ex. simplement créer un champ SQL, qui permette de choisir l’ID de l’article à lier, puis d’utiliser le code suivant :
<?php echo Jhtml::_(‘link’, ‘index.php?option=com_content&view=article&id=’ . $customFields[‘my_article_id’]->value .’>’, $customFields[‘my_article_id’]->text); ?>
NB : ce code est un exemple rapide. Le cas échéant, allez voir https://docs.joomla.org/Supporting_SEF_URLs_in_your_component pour plus s’informations.Par exemple, JRoute permet aussi de faire un lien vers l’article 1 de la catégorie 20 comme suit
echo JRoute::_(‘index.php?view=article&id=1&catid=20’);
Render Class
Pour chaque champ, il est possible de spécifier une classe de rendu (« Render class »).
A l’usage, on remarque cependant que sur le front-end cette classe de rendu n’est fonctionnelle que lorsqu’on affiche les champs en bloc p.ex. avant/après le contenu.
Autrement dit, cette classe de rendu est inactive
si on affiche un champ au sein d’un article via le shortcode
{field 1}
si on affiche un champ via un Override
NB : s’il s’agit d’un bug et non d’un « feature », ceci devrait être corrigé lors d’une mise à jour future
Où est défini le layout pour un champ (field) ou pour le groupe des champs (fields)
Pour générer le rendu d’un champ donné, Joomla! utilise le fichier
/components/com_fields/layouts/field/render.php
La dernière ligne de ce fichier indique
<span class= »field-value »><?php echo $value; ?></span>
Autrement dit, on affiche la valeur du champ, dans une balise span ayant la classe field-value.
De manière similaire, pour générer le rendu de le groupe des champs (p.ex. lorsqu’ils sont tous affichés avant/après le contenu), Joomla! utilise le fichier
/components/com_fields/layouts/fields
On note au passage la présence des deux lignes suivantes qui concernent la render_classs :
<?php $class = $field->params->get(‘render_class’); ?><dd class= »field-entry <?php echo $class; ?> »>
Ceci explique donc pourquoi la « Render Class » que l’on peut assigner à chaque champ ne joue que lorsqu’on affiche tous les champs en bloc p.ex. avant/après le contenu… (cfr point précédent)
Override pour le layout pour un champ (field) ou pour le groupe des champs (fields)
Imaginons que l’on souhaite créer un Override pour le rendu des champs.
On duplique alors simplement le fichier render.php évoqué ci-dessous, que l’on place au choix dans
/templates/MY_TEMPLATE/html/layouts/com_fields/field/templates/MY_TEMPLATE/html/layouts/com_content/field
pour le rendu de champ
/templates/MY_TEMPLATE/html/layouts/com_fields/fields/templates/MY_TEMPLATE/html/layouts/com_content/fields
pour le rendu du bloc des champs
Changez alors p.ex. la ligne
<span class= »field-value »><?php echo $value; ?></span>
par
<span class= »field-value btn btn-primary »><?php echo $value; ?></span>
et vous constaterez (si votre template utilise Bootstrap) que votre champ sera affiché sous la forme d’un bouton de la couleur primaire du site.
Alternate layout pour le layout pour un champ (field) ou pour le groupe des champs (fields)
L’Override est certes sympathique, mais il s’applique par définition à tous les champs.
Or, dans certains cas, on voudrait qu’il ne s’applique que pour certains champs.
C’est ce qu’on appelle l’Alternate Layout (layout alternatif).
La procédure est la même que celle expliquée ci-dessus pour l’Override, mais on renomme le fichier comme on le souhaite (et non plus render.php, qui est le nom d’origine).
Prenons comme exemple
/templates/MY_TEMPLATE/html/layouts/com_fields/field/joomladay.php/templates/MY_TEMPLATE/html/layouts/com_content/field/jug.php
où joomladay et jug sont bien entendu des noms arbitraires que j’ai choisis de donner à mes layouts personnalisés.
Utiliser un Alternate Layout au sein d’un article
Comme déjà vu, pour insérer au sein d’un article le champ ayant l’ID 1, il suffit d’insérer le shortcode suivant :
{field 1}
Si on veut que le rendu soit différent, on va pouvoir utiliser nos Alternate Layouts comme suit :
{field 1, joomladay} {field 1, jug}
Utiliser un Alternate Layout dans un Override d’article
On se souvient que dans un Override, on peut appeler le champ 1 comme suit :
<?php if (isset($this->item->jcfields[1])): ?> <?php echo FieldsHelper::render(‘com_content.article’, ‘field.render’, array(‘field’ => $this->item->jcfields[1])); ?><?php endif; ?>
Pour utiliser un de mes Alternate Layouts, il suffit que je remplace render par le nom de mon Alternate Layout (dans mon cas, joomladay ou jug) :
<?php if (isset($this->item->jcfields[1])): ?> <?php echo FieldsHelper::render(‘com_content.article’, ‘field.joomladay’, array(‘field’ => $this->item->jcfields[1])); ?><?php endif; ?>
Si en outre j’ai fait en sorte de pouvoir utiliser les Noms plutôt que les IDs, je peux réécrire ce code comme suit :
<?php if (isset($customFields[‘mes-ingredients’])): ?> <?php echo FieldsHelper::render(‘com_content.article’, ‘field.joomladay, array(‘field’ => $customFields[‘mes-ingredients’])); ?><?php endif; ?>
Mettre en forme les champs pour qu’ils soient alignés
Si j’affiche mes champs en bloc p.ex. avant/après le contenu et que je souhaite aligner les valeurs des champs quelle que soit la longueur des différents libellés, je peux simplement utiliser un peu de CSS. Exemple de solution rapide exploitant Flexbox, donnant à tous les libellés la même largeur et en les alignant à droite :
dd.field-entry { display: flex;}span.field-label { flex-basis: 200px; text-align: right; margin-right: 10px;}
Insérer les Custom Fields via un query plutôt qu’en éditant dans l’Administration
Si on a de nombreux Custom Fields à introduire, on pourrait vouloir le faire via un query plutôt qu’en éditant les articles à la main dans l’Administration.
Voici un simple exemple de query
INSERT INTO `#_fields_values` (`field_id`, `context`, `item_id`, `value`) VALUES(1, ‘com_content.article’, ’11’, ‘cats’),(2, ‘com_content.article’, ’11’, ‘food’);
où on remplace # par le préfixe de la table (si on lance la requête depuis PHPMyAdmin p.ex.) et où la 1e variable les l’ID du champ et la 3e variable l’ID de l’article.
How to Add Custom Fields to Joomla Contact Forms
Dans l’article suivant, il est expliqué en détail comment ajouter un Champ Personnalisé dans un formulaire de contact. https://www.joomlashack.com/blog/tutorials/contact-custom-fields/
Mais le problème est que, par défaut, tous les champs complémentaires sont ajoutés après le Captcha, ce qui n’est pas forcément le rendu voulu.
Pour personnaliser le rendu de la page, càd non seulement la mise en page mais aussi l’ordre des champs, voici comment appeler les différents champs dans l’override (surcharge) :
You need to override com_contact/default_form.php « Normal » fields can be rendered with e.g.
<?php echo $this->form->renderField(‘contact_name’); ?>
or
<?php echo $this->form->getLabel(‘contact_name’); ?><?php echo $this->form->getInput(‘contact_name’); ?>
Custom fields should be called with
<?php echo $this->form->renderField(‘fieldalias’,’com_fields’); ?>
or
<?php echo $this->form->getLabel(‘fieldalias’,’com_fields’); ?><?php echo $this->form->getInput(‘fieldalias’,’com_fields’); ?>
and then you can sort your fields as you want
Nicky Veitch donne un exemple concret d’override sur son site internet, où on peut directement télécharger le fichier PHP : https://www.websolutionz.com.au/blog/219-modifying-a-joomla-contact-form-with-custom-fields
<?php/** * @package Joomla.Site * @subpackage com_contact * * @copyright Copyright (C) 2005 – 2018 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */
defined(‘_JEXEC’) or die;
$this->form->setFieldAttribute(‘contact_message’, ‘hint’, ‘How can we help you?’);JHtml::_(‘behavior.keepalive’);JHtml::_(‘behavior.formvalidator’);
?><div class= »contact-form »> <form id= »contact-form » action= »<?php echo JRoute::_(‘index.php’); ?> » method= »post » class= »form-validate form-horizontal well »> <?php foreach ($this->form->getFieldsets() as $fieldset) : ?> <?php if ($fieldset->name === ‘captcha’ && !$this->captchaEnabled) : ?> <?php continue; ?> <?php endif; ?> <?php $fields = $this->form->getFieldset($fieldset->name); ?> <?php if (count($fields)) : ?> <?php endif; ?> <?php endforeach; ?>
<fieldset> <?php if (isset($fieldset->label) && ($legend = trim(JText::_($fieldset->label))) !== ») : ?> <legend><?php echo JText::_(‘COM_CONTACT_CONTACT_DEFAULT_LABEL’); ?></legend> <?php endif; ?> <div class= »control-group »> <div class= »control-label »><?php echo $this->form->getLabel(‘contact_name’); ?></div> <div class= »controls »><?php echo $this->form->getInput(‘contact_name’); ?></div> </div> <div class= »control-group »> <div class= »control-label »><?php echo $this->form->getLabel(‘contact_email’); ?></div> <div class= »controls »><?php echo $this->form->getInput(‘contact_email’); ?></div> </div>
<?php if($this->form->getInput(‘mobile’,’com_fields’) != »): ?> <div class= »control-group »> <div class= »control-label »><?php echo $this->form->getLabel(‘mobile’, ‘com_fields’); ?></div> <div class= »controls »><?php echo $this->form->getInput(‘mobile’, ‘com_fields’); ?></div> </div> <?php endif; ?>
<?php if($this->form->getInput(‘phone’,’com_fields’) != »): ?> <div class= »control-group »> <div class= »control-label »><?php echo $this->form->getLabel(‘phone’, ‘com_fields’); ?></div> <div class= »controls »><?php echo $this->form->getInput(‘phone’, ‘com_fields’); ?></div> </div> <?php endif; ?>
<div class= »control-group »> <div class= »control-label »><?php echo $this->form->getLabel(‘contact_subject’); ?></div> <div class= »controls »><?php echo $this->form->getInput(‘contact_subject’); ?></div> </div> <div class= »control-group »> <div class= »control-label »><?php echo $this->form->getLabel(‘contact_message’); ?></div> <div class= »controls »><?php echo $this->form->getInput(‘contact_message’); ?></div> <br /> <?php if ($this->params->get(‘show_email_copy’)) : ?> <div class= »control-group »> <div class= »control-label »><?php echo $this->form->getInput(‘contact_email_copy’); ?> <?php echo $this->form->getLabel(‘contact_email_copy’); ?></div> </div><br /> <?php endif; ?> </div> </fieldset>
<fieldset> <div class= »control-group »> <div class= »control-label »><?php echo $this->form->getLabel(‘captcha’); ?></div> <div class= »controls »><?php echo $this->form->getInput(‘captcha’); ?></div> </div> </fieldset>
<div class= »control-group »> <div class= »controls »> <button class= »btn btn-primary validate » type= »submit »><?php echo JText::_(‘COM_CONTACT_CONTACT_SEND’); ?></button> <input type= »hidden » name= »option » value= »com_contact » /> <input type= »hidden » name= »task » value= »contact.submit » /> <input type= »hidden » name= »return » value= »<?php echo $this->return_page; ?> » /> <input type= »hidden » name= »id » value= »<?php echo $this->contact->slug; ?> » /> <?php echo JHtml::_(‘form.token’); ?> </div> </div> </form></div>
Les autres extensions liées au Custom Fields
Custom Fields CK par Cédric Keiflin
Permet de personnaliser très facilement la mise en forme des Custom Fields (€ 14)
https://www.joomlack.fr/extensions-joomla/custom-fields-ck (présentation générale)
https://www.youtube.com/watch?v=YrOFLSm9Hqc (vidéo)
EasyLayouts, par les auteurs de JEvents
Permet de gérer de manière visuelle les layouts sans devoir faire soi-même les Overrides et Alternate Layouts (àpd £ 30.25)
Documentation
http://www.easylayouts.net (site officiel)
http://demo.easylayouts.net (démo)
https://www.youtube.com/watch?v=g5paS-vc5RE (Présentation 1’48 »)
+ plugins de champ (map, related articles)
Nouvelles fonctionnalités prévues bientôt (en date du 08/07/2017 – présentation JD17UK, cfr supra)
Conditional Field Display
Filter Module
Customisable Edit Pages by Type
More Custom Fields types and output options
Language specific Layouts
Filtres sur les Custom Fields
Commençons par le commencement : les Custom Fields ont été introduits dans Joomla par Allon Moritz de Digital Peaks.Et bien entendu, son extension DPFields intègre une possibilité de filtre https://joomla.digital-peak.com/products/dpfields
Par JoomLineJL Content Fields Filter – This is a free module that filters Joomla articles on custom fieldsUn module gratuit qui permet de filtrer sur base des champs personnalisés – voir démo sur le site(NB: il peut effectuer le filtrage en ajax donc sans rechargement de la page)http://joomline.org/extensions/modules-for-joomla/jlcontentfieldsfilter.html https://github.com/Joomline/JlContentFieldsFilter
EasyLayouts intègre une possibilité de filtres https://www.easylayouts.net/
Dans la communauté francophone, Pascal Lecomte (connu sous le nom de pmlecomte sur le forum) a adapté son module de filtres, initialement prévu pour pour les Tags, pour les Custom Fields (champs Personnalisés) https://www.conseilgouz.com/sources/simple-isotope
Démo (sur Tags) : https://www.conseilgouz.com/developpements-joomla
Il est possible d’afficher les champs personnalisés dans la nouvelle version 1.1.9.Il suffit de mettre {nom du champ} dans la zone de personnalisation de l’affichage et l’extension remplace {nom de champ} par sa valeur.
Joomlart propose MegaFilter qui intègre les Custom Fields quasiment depuis leur sortie ($ 35), mais qui utilise son propre layout (ce que je trouve handicapant – cfr infra) https://www.joomlart.com/joomla/extensions/ja-megafilter-for-joomla
Une autre extension intéressante (que j’ai découverte grâce à Yann) : Joomla CFS. En fait, il ne s’agit pas exactement d’un module de Filtre, mais de Recherche sur les Custom FieldsExtension : www.joomla-cfs.com Démo demo.joomla-cfs.com
Enfin, si vous voulez réaliser vous-même et simplement un outil de filtre relativement simple, vous pouvez aussi utiliser ce chouette outil qui permet de « jouer » uniquement avec du CSS pour dire p.ex. « si clique sur l’élément X, alors ajouter/supprimer/toggler la classe sur l’élément Y » : uilang.com Démo d’une telle utilisation : les filtres sur la page d’accueil de https://www.moisdudoc.be/demandez-le-programme
Joomlart MegaFilter plus en détail
https://www.joomlart.com/joomla/extensions/ja-megafilter-for-joomla (page d’accueil)
https://www.joomlart.com/updates/joomla-extensions/joomla-custom-fields-filter-is-now-available-for-download (news)
http://ja-megafilter-content.demo.joomlart.com (démo)
Sur la démo, Joomlart MegaFilter a l’air sympathique, mais dans la pratique, sa prise en main n’est pas si intuitive que ça. Pour cette raison, je partage ici une série d’astuces qui vous permettront de gagner du temps, leur documentation étant loin d’être complète et leur support n’étant pas toujours super réactif.
Comment supprimer les mentions « hits » et « rating » dans la vue « Filtre »
Dans la vue « Filtre », apparaît sur le « résumé » de chaque article le nombre de vues (« hits ») et les votes (« rating »).
Pour effacer ces hits & ratings, faire un Override de
/plugins/jamegafilter/content/layouts/default/product-item.php
en le dupliquant dans
/templates/YOUR_TEMPLATE/html/layouts/jamegafilter/content/default/product-item.php
Effacer ensuite les lignes suivantes
<div class= »product-reviews-summary short »> <div class= »rating-summary »> {?rating} <div title= »{rating} out of 5″ class= »rating-result »> <span style= »width:{width_rating}% »></span> </div> {:else} <div title= »0% » class= »rating-result »> <span style= »width:0% »></span> </div> {/rating} </div> </div> <div class= »product-reviews-summary short »> <div class= »hits-summary »> {?hit} <span class= »file-downloads »><?php echo JText::_(‘COM_JAMEGAFILTER_HIT’);?> : {hit}</span> {:else} <span class= »file-downloads »><?php echo JText::_(‘COM_JAMEGAFILTER_HITS’);?> : {hits}</span> {/hit} </div> </div>
NB : c’est dans ce fichier que l’on voit le nom de la chaîne de caractère correspondant au bouton « View detail ». Il s’agit de COM_JAMEGAFILTER_VIEW_DETAIL, pour lequel on pourra utilement donner une traduction française.
Comment changer le nombre de caractères de l’introduction
1e étape : changer la valeur par défaut (100)
Editer (ou mieux : faire un Override)
/plugins/jamegafilter/content/helper.php
et changer la valeur de 100 dans le code suivant :
$item->desc = !empty($baseItem->introtext) ? strip_tags(substr($baseItem->introtext,0,100)).’…’ : »;
2e étape : réindexer manuellement (via le menu Composant > MegaFilter)
3e étape : vider le cache navigateur (si nécessaire)
Fonctionnement de l’indexation
Visiblement, la réindexation ne se fait pas « en live » mais demande une intervention manuelle après chaque édition d’article concerné.
Pourquoi une indexation ? Sans doute parce que le résultat de la page « Filtre » ne se fait pas en interrogeant directement la base de données (peut-être parce que ce serait trop lourd sur un site avec des données importantes ?), mais se base sur un fichier json qui est justement généré lorsqu’on clique sur le bouton d’indexation.
Ce fichier json est disponible ici :
/media/com_jamegafilter/en_gb/1.json/media/com_jamegafilter/fr_fr/1.json
Comment insérer un Custom Field dans la vue « Filtre »
Dans le fichier product_item.php mentionné plus haut il suffit d’ajouter
{attr.ct1.value}
pour obtenir le contenu du Field 1
Attention, l’affichage est brut (« raw »), càd qu’il s’agit de la valeur du champ sans son éventuel rendu.
Exemples :
pour un champ Media, cela donne
images%2Fpizza-americano.png
pour un champ Editor, cela donne
<ul> <li>pâte</li> <li>jambon</li> <li>fromage</li> </ul>
NB : si un champ peut avoir plusieurs valeurs et qu’on souhaite ajouter une classe pour chacune de ces valeurs, on peut alors ajouter le code suivant :
{#attr.ct3.value} <p class= »{.} »>{.}</p>{/attr.ct3.value}
qui donnera p.ex. ceci au niveau de l’output
<p class= »red »>red</p><p class= »green »>green</p><p class= »blue »>blue</p>
Comment activer le « infinite scroll » sur la page de filtre
Dans la configuration de JA MegaFilter, le « infinite scroll » s’appelle « auto page », qu’il suffit donc d’activer.
Liens utiles sur le forum de MegaFilter
https://www.joomlart.com/forums/topic/override-of-articles/#post-1039516 (custom fields)