La beauté et la puissance des Custom Fields

by Marc Dechèvre: https://www.woluweb.be — all presentations: https://slides.woluweb.be

Woluweb

Marc Dechèvre

Christian Bardin & Marc Dechèvre

JoomlaDay Paris 2018 | #jd18fr

Champs Personnalisés = Custom Fields

1 Joomla avant la version 3.7

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

2 Et puis Joomla 3.7 est arrivé

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

3 Et ça a donné ce sentiment

roller coaster

4 Quelques exemples

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

4.1 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 :

Probablement encore plus de 6 épisodes à venir !

4.2 Illustrations

6exemples.png

4.2.1 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

4.2.2 Captures d’écran des exemples

… avec les captures d’écran correspondantes

1.png

2b.gif

3.png

4.png

5.png

6.png

5 Comment on fait ça ?

5.1 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

5.2 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

/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” :

<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>

5.3 Le CSS correspondant

/* 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;
}

5.4 Le résultat

2018-05-24_10h55_33.png

6 Thank you, Allon !

Avant de terminer, applaudissons Allon Moritz (CH)

Allon

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

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

7 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 which is a Custom Field allowing to make links between Articles very easily.

8 Contact

Marc Dechèvre

Woluweb

Marc Dechèvre | @woluweb
+32 474 37 13 12 | +32 2 772 58 69
https://www.woluweb.be/contact

Other presentations