Zoo 2 : Modifier les modèles

Un article technique !

Nous utilisons parfois le composant Zoo édité par Yoo Thème. Ce composant permet de construire des structures de contenu plus complexes que celles proposées par défaut par Joomla. En étant plus libre du format de contenu, ce composant permet de générer ce qu'on pouvait faire auparavant avec un composant dédiée. On retrouve ce type de fonctionnalité avec SOBI sous Joomla, ou CCK (Content Construction Kit) sous Drupal.

Yoo Thème va bientôt mettre en ligne la seconde version de Zoo. Une réécriture en profondeur pleine de nouveauté!

Pour les besoin d'un de nos clients nous avons du réécrire les modèles, notamment pour créer des diaporama (sans pour autant utiliser le diaporama proposé par Zoo...). Un des besoins consiste donc à réécrire la façon dont l'image est affichée : au lieu de renvoyer un code HTML complet avec balise <img> etc. nous ne voulons que l'URI de la l'image.

Pour ceux que ça intéresse, voici la méthode (un minimum de compréhension du PHO et de la structure de Joomla est nécéssaire pour exploiter correctement cette piste de travail) :

1 - Trouver le fichier PHP qui réalise l'ensemble des affichages pour un article Zoo. Ce fichier est dans /media/zoo/applications/NOMDELAPPLIZOO/templates/NOMDULAYOUT/renderer/item/MODELAYOUT.php où :

• NOMDELAPPLIZOO : nom de l'application Zoo, par exemple product, blog...
• NOMDULAYOUT : en général default, mais vous pouvez en créer d'autre, il suffit simplement de recopier la base par défaut et de modifier le bon fichier XML pour déclarer le nouveau layout
• MODELAYOUT : selon ce qui est dans le fichier XML correspondant aux différents affichages : full, teaser, feed, etc.

A l'intérieur de ce fichier, vous trouvez des instructions qui permettent d'afficher des Zones (déclarées dans Zoo au niveau de l'interface d'administration). Là vous pouvez directement afficher des éléments (déclaré ou non dans les zones) en utilisant le code PHP suivant :

$monelement = $item->getElement('54b6875d-3423-4d4e-be40-f134ddcf6545');
$myE = $monelement ->render();
echo $myE;

La fonction getElement() contient un argument unique qui identifie un élément particulier de votre modèle de contenu. Vous pouvez trouver une correspondance entre un identifiant et un élément en analysant le contenu du fichier situé dans /media/zoo/applications/NOMDELAPPLIZOO/types/VOTRETYPEDECONTENU.xml

A partir de là, nous savons altérer "à la main" le fichier de modèle Zoo. On peut déjà faire pas mal de chose, par contre, impossible d'afficher seulement le chemin de l'image. On envisage alors plusieurs solutions : écrire notre propre fonction render, faire une regex complexe pour extraire uniquement l'URI de l'image, etc. Nous avons choisi de faire évoluer la fonction render pour qu'elle corresponde à ce que nous cherchons à faire.

2 - Modifier la fonction render(). C'est là que le jeux de piste commence vraiment et que ça devient interessant.

En cherchant un peu, vous arriverez vite sur le fichier /administrator/components/com_zoo/elements/image/tmpl/image.php. Au passage, l'affichage des autres type de contenu est juste à côté. En modifiant ce fichier, on peut facilement supprimer tout ou partie du formatage pour, par exemple, n'afficher que l'URI de l'image. Ceci dit, on perd la faculté d'afficher une image de façon "simple".

Nous avons choisi de créer un nouveau paramètre pour les images et d'utiliser ce paramètre pour préciser s'il faut afficher l'image ou son URI.

3 - Ajouter un paramètres au type de contenu Zoo. Rien de plus simple, il suffit d'ouvrir le fichier /administrator/components/com_zoo/elements/image/image.xml et d'ajouter un bloc param :

<param name="urlimage" type="radio" default="0" label="Afficher URL" description="Affiche uniquement l'URL de l'image.">
<option value="0">Non</option>
<option value="1">Oui</option>
</param>

Retournez sur votre type de contenu dans Zoo et faites vos modifications. Un passage sur le fichier /media/zoo/applications/NOMDELAPPLIZOO/types/VOTRETYPEDECONTENU.xml vous permettra de constater que votre paramètre à bien été pris en compte. Il ne nous reste qu'a modifier la fonction render() !

4 - Modifier render() pour de bon ! Dans le fichier /administrator/stite/components/com_zoo/elements/image/image.php, nous modifions la fonction render() pour ajouter :

$urlimage = $this->_config->get('urlimage');

Cette ligne permet de récupérer la valeur du paramètre urlimage que nous avons créé initialement.

A partir de là, plusieurs choix s'offrent à vous :

• Modifier le fichier tmpl en envoyant un nouveau paramètre dans la fonction de retour : La fonction render fait un return avec self::renderLayout. Nous ajoutons au tableau (array) de paramètres notre variable $urlimage. Il ne reste alors à modifier que le fichier en intégrant votre variable.
• Modifier le retour de la fonction render pour qu'elle n'envoi que votre variable ou un tableau de variable (notre choix) en ajoutant un petit if complémentaire et pas l'ensemble du fichier tmpl
• Créer un nouveau layout et utiliser la fonction renderLayout avec votre propre fichier tmpl

Pour nous c'est terminé, par contre, vigilance maximum car nous avons massivement modifié les fichiers d'origine de Zoo, et donc une mise à jour risquerait d'être fatale à nos modifications. Une prochaine évolution consistera à créer un type de contenu Image qui nous sera propre et qui nous permettra de ne pas avoir de problème lors d'une mise à jour !