Les Overrides/Surcharges de Layout
Utilisez la puissance et la souplesse de Joomla!
Christian Bardin | JoomlaDay 2018 à Paris | #jd18fr
Remerciements : Marc Dechèvre / Woluweb
1 Objectif
L’objectif de ce tutoriel est de personnaliser très facilement un module natif de Joomla afin d’obtenir ceci
http://www.greendog.fr/override-joomladay-2018
… juste avec le noyau de Joomla et donc sans aucune extension !
2 Création du module en administration
Dans cet exemple, on va utiliser le module Derniers Articles (Latest Articles) qui permet de réaliser des choses intéressantes et qui correspondent à un besoin sur beaucoup de sites.
3 Rendu du module par défaut
Par défaut, le module a un rendu très simple : on a une simple liste des X articles souhaités, avec un hyperlien sur le titre.
NB : le template installé (Helix3 dans cet exemple) utilise Bootstrap3, dont on utilisera les classes. Mais cela peut bien sûr être transposé…
Code correspondant :
<?php
/**
* @package Joomla.Site
@subpackage mod_articles_latest
@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;
?>
<ul class="latestnews<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php endforeach; ?>
</ul>
4 Création de la substitution
- Aller dans Extensions > Templates > Templates
- Cliquer sur le template utilisé
- Cliquer sur l’onglet Créer des substitutions (Create Overrides)
- Cliquer sur mod_articles_latest et la substitution s’est créée
5 Message de succès de la création du nouveau layout
La Substitution a été créée.
- On la retrouve ensuite sur l’onglet Editeur > html > mod_articles_latest
- si un fichier default.php existe déjà, Joomla ajoutera automatiquement l’horodatage au nom du fichier afin de ne jamais risquer d’écraser une substitution précédente
- On peut cliquer sur le nom du fichier créé et cliquer sur le bouton Renommer le fichier
6 Affichage avec print_r
- print_r est une commande qui permet d’afficher tout ce qui est disponible sur un objet
- on va donc dans le fichier de substitution mettre le code suivant afin de voir ce qui est à notre disposition
Code
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_latest
*
* @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="latestnews<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<div>
<pre>
<?php print_r($item);?>
</pre>
</div>
</div>
<?php endforeach; ?>
</div>rendu du print_r dans notre exemple
7 Choix du layout du module
Une fois qu’on a créé des Layouts Overrides, on peut dans le module choisir quel override on souhaite.
Le nom qu’on aura donné au fichier PHP de substitution déterminer le nom que l’on voit ici dans le menu déroulant.
8 Phase 1
Dans une 1e phase * les articles vont être affichés en 3 colonnes (utilisant Boostrap3 sur lequel est basé le template utilisé) * on va reprendre non seulement le titre, mais aussi le texte d’Introduction (“introtext”)
Code correspondant
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_latest
*
* @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="latestnews<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<div class="news-jday col-md-4">
<div class="content-jday">
<h4 class="title-jday">
<a href="<?php echo $item->link; ?>">
<?php echo $item->title; ?>
</a>
</h4>
<p class="intro-jday">
<?php echo $item->introtext; ?>
</p>
</div>
</div>
<?php endforeach; ?>
</div>
9 Phase 2
Le résultat correspond à ce qui est souhaité, mais on se rend compte que le texte d’introduction est bien souvent trop long.
En allant chercher l’inspiration dans d’autres fichiers PHP (dans com_content par exemple), on peut repiquer un bout de code permettant de tronquer après X caractères.
Code correspondant
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_latest
*
* @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="latestnews<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<div class="news-jday col-md-4">
<div class="content-jday">
<h4 class="title-jday">
<a href="<?php echo $item->link; ?>">
<?php echo $item->title; ?>
</a>
</h4>
<p class="intro-jday">
<?php echo JHTML::_('string.truncate', $item->introtext, 200, false, false) ; ?>
</p>
</div>
</div>
<?php endforeach; ?>
</div>
10 Phase 3
Pour rendre le module plus visuel, on décide d’ajouter l’image d’introduction.
A nouveau, on peut chercher l’inspiration pour le bout de code dans com_content.
Code correspondant
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_latest
*
* @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="latestnews<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<?php
$article_images = json_decode($item->images);
$article_image = '';
$article_image_alt = '';
if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
$article_image = $article_images->image_intro;
$article_image_alt = $article_images->image_intro_alt;
}?>
<div class="news-jday col-md-4">
<div class="content-jday">
<p class="image-jday">
<a href="<?php echo $item->link; ?>">
<img src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
</a>
</p>
<h4 class="title-jday">
<a href="<?php echo $item->link; ?>">
<?php echo $item->title; ?>
</a>
</h4>
<p class="intro-jday">
<?php echo JHTML::_('string.truncate', $item->introtext, 200, false, false) ; ?>
</p>
</div>
</div>
<?php endforeach; ?>
</div>
11 Création d’un ‘lire la suite’ personnalisé
Plutôt que d’avoir un traditionnel “lire la suite”, on souhaite personnaliser le texte. Pour ce faire, on va dans Extensions > Langues > Substitutions et on crée une substitution de langue (pour le Site et dans la Langue voulue).
12 Language override
On crée une chaîne de traduction en majuscules avec uniquement des caractères non accentués et des underscore qu’on insèrera dans le code du module, et le texte qui sera ce que l’on verra (l’avantage est que l’on pourra changer le texte facilement, et le traduire dans une autre langue au besoin)
13 Et voilà
Dans le code final, on ajoute dans cette dernière étape * le lien “lire la suite” * le nom de la catégorie en incrustation sur l’image
13.1 code PHP utile
Ci-après, quelques mots d’explication sur le code PHP utile à l’exercice :
//code pour afficher le contenu de la liste des articles que Joomla envoie lorsqu'on a demandé d'afficher les 6 derniers articles d'une ou de plusieurs catégories
<?php print_r($item);?>
//code pour n'afficher que les 200 premiers caractères de l'intro de l'article
<?php echo JHTML::_('string.truncate', $item->introtext, 200, false, false) ; ?>
//le premier argument false permet de ne pas tenir compte des balises html contenus dans le code
//le second argument false permet de couper exactement au nombre de caractéres demandés, si on met true le dernier mot affiché ne sera pas coupé
//code qui permet de décoder le contenu de la ligne images dans la variable de l'article
//on assigne le chemin de l'image à une variable $article_image
//on assigne le contenu du champ alt de l'image à une variable $article_image_alt
<?php
$article_images = json_decode($item->images);
$article_image = '';
$article_image_alt = '';
if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
$article_image = $article_images->image_intro;
$article_image_alt = $article_images->image_intro_alt;
}?>
//code d'affichage d'une chaine de langue créée dans les substitutions de langues joomla
<?php echo JText::_('MOD_CAT_JDAY_READMORE');?>13.2 CSS utilisé
Bien sûr, pour un rendu à la fois ergonomique et agréable à l’oeil quelques lignes de CSS sont utiles (à mettre typiquement dans votre custom.css ou fichier équivalent selon votre template) :
/* JoomlaDay FR 2018 - Christian Bardin - Les overrrides de layout */
/* module Joomla Derniers articles - sur base Helix3 de JoomShaper */
/* on reinitialise les styles Helix3 du module */
.sp-module .latestnews > div {
padding-bottom: 0;
margin-bottom: 15px;
border-bottom: none;
}
/* styles du titre article */
.title-jday {
font-size: 16px;
text-transform: uppercase;
margin: 15px 0;
font-weight: 600;
border-bottom: 1px solid #ececec;
padding-bottom: 5px;
}
/* styles des paragraphe et liens */
p.intro-jday, .intro-jday a {
margin: 0;
line-height: 1.5em;
font-weight: 500;
}
/* styles au survol des liens */
.intro-jday a:hover {
color: #000000;
}
/* BLOC IMAGE */
.image-jday {
position: relative;
}
/* ETIQUETTE CATEGORIE */
.cat-jday {
text-transform: uppercase;
text-align: right;
background: #d0453d;
font-size: 14px;
padding: 6px 9px;
line-height: 1em;
position: absolute;
top: 15px;
right: 0px;
color: #ffffff;
font-weight: 700;
}
/* BLOC IMAGE ET CATEGORIE AU SURVOL */
.news-jday * {
transition: all ease 0.3s;
}
.image-jday img:hover {
transform: scale(1.05);
}
.image-jday a:hover .cat-jday {
right: -9px;
top: 8px;
}
/* LIRE LA SUITE CUSTOM */
.link-jday {
text-align: right;
border-bottom: 9px solid #f9f9f9;
margin: 0 0 15px 0;
}
.link-jday a {
padding: 2px 5px;
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
color: #f9c256;
}
.link-jday a:hover {
color: #af322b;
} 13.3 Code final
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_latest
*
* @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="latestnews<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<?php
$article_images = json_decode($item->images);
$article_image = '';
$article_image_alt = '';
if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
$article_image = $article_images->image_intro;
$article_image_alt = $article_images->image_intro_alt;
}?>
<div class="news-jday col-md-4">
<div class="content-jday">
<p class="image-jday">
<a href="<?php echo $item->link; ?>">
<img src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
<span class="cat-jday">
<?php echo $item->category_title; ?>
</span>
</a>
</p>
<h4 class="title-jday">
<a href="<?php echo $item->link; ?>">
<?php echo $item->title; ?>
</a>
</h4>
<p class="intro-jday">
<?php echo JHTML::_('string.truncate', $item->introtext, 200, false, false) ; ?>
</p>
<p class="link-jday">
<a href="<?php echo $item->link; ?>">
<?php echo JText::_('MOD_CAT_JDAY_READMORE');?>
</a>
</p>
</div>
</div>
<?php endforeach; ?>
</div>14 Rendu final
Nous voici arrivés au terme de l’exercice.
Grâce aux Layout Overrides et sans même être développeur, on peut donc très facilement personnaliser les fonctionnalités et l’affichage de son site.
En outre, cela signifie aussi que le résultat obtenu est particulièrement robuste dans le temps : tout est du Joomla natif et donc pas pas de dépendance d’extensions tierces ni d’éventuels souci à court/long terme lors des mises à jour.
