---
title: "La beauté et la puissance des Custom Fields "
format: html
theme: darkly
number-sections: true
include-in-header:
  - text: |
      <meta property="og:type" content="article" />
      <meta property="og:image" content="https://slides.woluweb.be/opengraph.png" />
      <meta property="og:image:width" content="940" />
      <meta property="og:image:height" content="788" />
      <meta property="og:title" content="La beauté et la puissance des Custom Fields " />
      <meta property="og:site_name" content="Woluweb" />
      <meta property="og:description" content="Marc Dechèvre ● Woluweb" />
  - text: <script defer data-domain="woluweb.be" src="https://plausible.io/js/script.js"></script>
---

by [Marc Dechèvre](https://www.woluweb.be/)

<img src="images/woluweb_mini.png" alt="Woluweb">

<img src="images/marc_dechevre.png" alt="Marc" style="width:100px;height:auto;">


Christian Bardin & Marc Dechèvre

JoomlaDay Paris 2018 | **#jd18fr**


Retrouvez tous les slides sur <i class="fa fa-desktop"></i>  https://slides.woluweb.be


<small>Champs Personnalisés = Custom Fields</small>

## Joomla avant la version 3.7

Proche de la perfection... | Pour faire une analogie musicale :

<iframe src="https://open.spotify.com/embed/track/4GRDiNU8fkizXz4rDX9gS5" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

## Et puis Joomla 3.7 est arrivé

P* ! 3.7 a embarqué les **Custom Fields**. Joomla rocks !!!

<iframe src="https://open.spotify.com/embed/track/6p5MrYPnXtvb9DHOscgFlL" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

## Et ça a donné ce sentiment

![roller coaster](https://media.giphy.com/media/RgDfUOzEwATiE/giphy.gif)

## Quelques exemples

Les Champs Personnalisés peuvent être utiles dans plein de contextes.

### Version détaillée

Sur le nouveau portail www.joomla.fr, une série d'articles dédiés aux Custom Fields.
Déjà 2 épisodes :

* https://www.joomla.fr/actualites/cp-episode-1-cas-utilisation-champs-personnalises
* https://www.joomla.fr/actualites/cp-episode-2-comment-gerer-ses-champs-personnalises

Probablement encore plus de 6 épisodes à venir !

### Illustrations

![6exemples.png](images/6exemples.png)

#### URLs des exemples

1. https://www.bbpo-fbpo.be/nl/organizer-zoeken
2. https://www.moisdudoc.be/demandez-le-programme
3. https://www.lejourlepluscourt.be
4. http://www.greendog.fr/experimentations
5. https://clear-my-cache.com
6. https://www.joomladay.fr

#### Captures d'écran des exemples

... avec les captures d'écran correspondantes

![1.png](images/1.png)

![2b.gif](images/2b.gif)

![3.png](images/3.png)

![4.png](images/4.png)

![5.png](images/5.png)

![6.png](images/6.png)

## Comment on fait ça ?

### Exemple concret - le site joomladay.fr

En live coding, voyons comment on peut ajouter un Custom Field sur les articles de la Catégorie *Conférences*

Mais avant de commencer à créer tous les Custom Fields
* faire un inventaire : (i) quels Custom Fields et (ii) quels types
* assignés à quelles catégories
* si possible, essayer de simplifier en utilisant un même CF pour plusieurs catégories p.ex.

![champs.png](images/champs.png)

### Le PHP dans le layout override

Pour personnaliser le rendu de tous les articles de Catégorie *Conférences*, un Layout Override de la vue Article a été réalisé et un fichier **conf.php** a donc été créé dans le dossier

```php
/templates/shaper_helix3/html/com_content/article
```

où ```shaper_helix3``` est le nom du template utilisé dans le cas présent. NB : si on édite les fichiers directement depuis l'interface d'administration de Joomla, on trouve donc le fichier dans ```html > com_content > article```

Le champ 4 est un Champ Personnalisé (qui n'est pas natif) permettant de faire un lien vers un fichier (PDF) et qui a ses propres paramètres de styling directement dans ses paramètres.

Le champ 28 est un Champ Natif (simple champ lien).

A l'endroit voulu du Layout Override, on ajoute le code suivant pour afficher respectivement les champs "Télécharger" et "Ouvrir" :

```php
<div class="link-jday">

    <?php if (!empty($this->item->jcfields[4]->value)): ?>
        <?php echo $this->item->jcfields[4]->value; ?>
    <?php endif; ?>

    <?php if (!empty($this->item->jcfields[28]->value)): ?>
        <a target="_blank" rel="noopener" href="<?php echo $this->item->jcfields[28]->rawvalue; ?>"
         class="btn btn-primary btn-sm"><i class="fa fa-external-link"></i> Ouvrir</a>
    <?php endif; ?>

</div>
```

### Le CSS correspondant

```css
/* pdf ou lien */
.link-jday .btn, .btn-sm {
	padding: 10px 15px;
	font-size: 18px;
	text-transform: uppercase;
	border-radius: 0;
	font-weight: 600;
	margin: 0 15px 15px 0;
}
```

### Le résultat

![2018-05-24_10h55_33.png](images/2018-05-24_10h55_33.png)

## Thank you, Allon !

Avant de terminer, applaudissons Allon Moritz (CH)

![Allon](images/allon_moritz.jpg "150x150")

Il est l'auteur des Champs Personnalisés (auparavant un de ses extensions DP Fields qu'il a donnée gratuitement au Projet Joomla). **Faites-lui un Tweet maintenant**

```php
Thank You @laoneo for #Joomla #CustomFields ! #jd18fr
```

## Ressources utiles

Mode d'emploi par l'exemple

https://cinnk.com/magazine/juillet-2017/977-les-champs-personnalises-dans-joomla

Un maximum de ressources sur le sujet

https://cinnk.com/magazine/juillet-2017/960-custom-fields-bonus

## Merci

Tous vos retours sont les bienvenus.

Vous avez des exemples d'utilisation de Custom Fields ?

Envoyez-les nous et nous pourrons p.ex. les intégrer dans les exemples qui figureront dans les prochains Episodes "Champs Personnalisés" à paraître sur le portail https://www.joomla.fr

*A special thank to Peter van Westen who did many improvements for us on [Article Fields](https://www.regularlabs.com/extensions/articlesfield) which is a Custom Field allowing to make links between Articles very easily.*