A force de lire des articles sur joomla vous avez certainement entendu parler des overrides ou encore surcharge en français.

Voici une brêve explication suivit d'un aspect plus technique a la fin de l'article?

Qu'est ce que l'override?

L'override (surcharge) permet de remplacer un fichier par un autre et cela automatiquement dans le cas de joomla. Majoritairement pour modifier les modules et composants qui n'aurait pas le comportement correcte ou un affichage ne correspondant pas a vos attentes.

A quoi ça sert

Modifier simplement et rapidement l'affichage et le comportement de joomla.

Comment faire un override ?

Ajouter un fichier dans votre template au bonne endroit.

On va partir sur un template s'appelant "beez3" pour l'example et qui est utilisé pour le site et non l'administration.

Les themes de votre site se trouve en partant de la racine (souvent dans www sur votre FTP) dans le répertoire templates.

Ou placer mes fichiers

 Si on part sur notre example "beez3" tous les fichiers seront dans templates/beez3

Voici les répertoires existant en example pour l'override et leur fonction.

templates/beez3/html 
Ce répertoire inclus tous les overrides de composant 

Nous allons prendre pour notre cas le composant com_contact qui affiche les contacts renseignés dans Joomla.
Ce composant est d' origine, en partant de la racine de votre site, dans components/com_contact.

Le répertoire qui inclus le rendu des différentes vues est views et chaque vue est dans son propre sous-répertoire

/featured
/contact
/category
/categories

Toujours pour l'exemple nous allons surcharger la vue featured pour y acceder il faut se placer dans le répertoire
components/com_contact/views/featured

Vous apperceverrez un autre sous répertoire s'appelant tmpl incluant 4 fichier dont 2 fichiers .php
default_items.php
default.php
Ces deux fichiers sont ceux qui permettent l'override.

Nous allons donc copier les 2 fichiers dans notre template.
copier les fichiers du répertoires
 components/com_contact/views/featured/tmpl/ 
vers 
 templates/beez3/html/com_contact/featured
vous avez créé votre premier override.

Dés a présent les fichiers originaux de la vue featured ne seront plus utilisé dans le template beez3 mais ceux que vous avez ajouter dans templates/beez3/html/com_contact/featured.

Allons plus loin , surcharge des "layouts"appelés avec JLayout de joomla 3.0 .

Une des nouveautés de joomla 3.0 sont les layouts. Ce sont des petits fichiers,en général, qui peuvent être utilisés aussi bien du site que de l'administration. Ils sont situés dans le répertoire layouts dans la racine de votre site. A ne pas confondre avec les fichiers plus haut que l'on appel aussi souvent "layout" dans beaucoup de tutoriaux.

Le concept est assez similaire mais la structure change. Nous allons ajouter pour notre exemple un fichier bonjour.php et vu qu'il concerne le composant contact de joomla, il serait normalement dans.
 /layouts/joomla/contact/bonjour.php

pour le template, il faut utilisé la même structure donc  templates/beez3/html/layouts/joomla/contact/bonjour.php , ceci n'a de sens que si le fichier bonjour.php existe car sinon d'autres méthodes plus simple pour ajouter vos codes sont possible.

Donc admettons que joomla utilise le fichier layout bonjour.php et qu'il contient

 <h5><?php echo bonjour ?></h5>

 si vous créez le fichier templates/beez3/html/layouts/joomla/contact/bonjour.php

  <h4><?php echo bonjour ?></h4>

 celui ci viendra en remplacement.

Pour les composants qui ne sont pas inclus dans le core de joomla, les répertoires sont différent, mais garde la même logique. Pour le moment, il y a peu de composant externe utilisant les layouts mais voici comment il faudrait s'y prendre si vous créez un composant.

$layout=new JLayoutFile('mon_layout');
$html=$layout->render($data);
echo $html;

Ceci permet d'utiliser le  fichier dans le site dans notre cas en partant de la racine du site:
 components/com_MONCOMPOSANT/layouts/mon_layout.php

pour l'override du template

templates/beez3/html/layouts/com_MONCOMPOSANT/mon_layout.php


Comment appeler ces fichiers

voici un extrait de code du fichier components/com_contact/views/featured/tmpl/default_item.php

<?php $this->item->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>

qui affiche les tags de joomla dans ce cas.
JLayoutFIle a comme paramètre '
joomla.content.tags' ce qui lui ordonne d'utilisé le fichier  /layouts/joomla/content/tags.php si vous n'avez pas ajouter le fichier templates/beez3/html/layouts/joomla/content/tags.php dans le template.

Si le rendu original de joomla 3 n'est pas correct, copier le fichier original dans templates/beez3/html/layouts/ + le 1er paramètre en sachant que le point représente un sous répertoire et que le .php et a ajouter à votre fichier.

Utiliser sa version de bootstrap, jQuery et autres javascript (jui)

J'ai cherché un certain temps pour utiliser bootstrap 3 dans mes projects sans avoir à modifier le code de Joomla, car tous simplement, il faut bien chercher ou et comment cela se passe.

La méthode semble similaire mais pas exactement.

En effet l'inclusion de boostrap dans joomla se fait à plusieurs endroit avec:

  • JHTML
  • JLAYOUT
  • JUI

Ce qui fait qu'au final selon votre projet ou template, les changements ont l'air compliqué car il faut trouver chaque répertoire à surcharger mais n'ayant pas toujours la même structure.

pour JHTML il n'y a pas vraiment de régles exactes mais utilise souvent le sous-dossier helper du composant comme ceci

JHtml::addIncludePath(JPATH_COMPONENT . '/helpers'); 

pour utiliser ceux du template il faudra dans votre override le changer, par exemple avec

JHtml::addIncludePath(JPATH_THEMES . '/beez/com_contact/helpers');

je choisit souvent le nom du composant + le répertoire original(dans l'exemple(com_contact+helpers) pour mieux retrouver les bons fichiers et surtout éviter de surchargé le mauvais composant.

pour JLAYOUT les explication de base se trouve au début de l'article, mais si par exemple vous utilisé bootstrap 3 le html généré par les layouts de joomla seront obseléte et il faudra aussi modifier ces fichiers en conséquence.

par exemple, le rendu original de jomla pour l'image d'introduction ne me plaisait pas. voici le code de remplacement que j'ai utilisé avec un template bootstrap3.

le fichier est à placer dans templates/MONTEMPLATE/html/layouts/joomla/content/intro_image.php

<?php
/**
* @package MONTEMPLATE
* @subpackage Layout
*
* @copyright Copyright (C) 2013 Studio42. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$params = $displayData->params;
?>
<?php $images = json_decode($displayData->images); ?>
<?php if (isset($images->image_intro) && !empty($images->image_intro)) { ?>
<div class="col-lg-4"> <img class="img-responsive img-full
<?php if ($images->image_intro_caption) {
echo ' caption"'.' title="' .htmlspecialchars($images->image_intro_caption) ;
} ?>"
src="/<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/> </div>
<div class="col-lg-8">
<?php } else { ?>
<div class="col-lg-12">
<?php }

qui permet d'avoir des images d'intro responsives, dans ce cas, façon bootstrap 3.

 pour JUI cela se complique aussi un peu. Pour rappel JUI intègre les scripts et style css bootstrap,jquery, choosen ... et se trouve dans votre site joomla dans le répertoire media/jui .

Mais l'override de ces fichiers n'est pas aussi logique car joomla ajoute le type avant et le supprime du répertoire par exemple:

media/jui /js/bootstrap.js devient en cas d'override templates/MONTEMPLATE/js/jui/bootstrap.js dans la cas d'un fichier javascript
media/ jui/css/ bootstrap.css devient en cas d'override templates/MONTEMPLATE/ css/jui/bootstrap.css dans le cas d'une feuille de style.
media/ jui/images/ image.png devient en cas d'override templates/MONTEMPLATE/ images/jui/image.png dans le cas d'une image.

Surcharges des langues

allez dans l'administration dans Extensions>Gestions de langues puis l'onglet Substitutions
 le lien direct est administrator/index.php?option=com_languages&view=override

 Ajouter vos traductions ici plutôt que dans le fichier de langue, ceci ne seront jamais effacé et seront toujours utilisés en priorité.

Conclusion

Vous savez comment modifier vos fichier d'override et éviter ainsi de toucher aux fichiers de joomla originaux. Ceci facilitera aussi le debugage de votre site car en changeant de template vous pouvez voir si le soucis vient de vos modifications ou de joomla(ou d'une autre extension).