Tous les développeurs aiment connaître la bonne façon de réaliser quelque chose. C'est souvent par essais et erreurs, mais dans cet article, Dimitris Grammatiko partage ses idées et présente la manière définitive d'ajouter des images dans Joomla 4 ainsi que la façon dont vous pouvez rétroporter ces avantages dans les anciennes versions de Joomla. Dimitris explique l'historique et l'utilisation de la prise en charge native des images à chargement paresseux, ainsi qu'un nouveau concept d'adaptateurs pour le stockage des images, tous deux livrés dans Joomla 4.0.5.
Le faire fonctionner correctement est simple comme illustré ci-dessous.
Mais d'abord un peu de contexte.
Responsable de la version 3.10 de Joomla, Tobias Zulauf a participé à de nombreux domaines du projet Joomla. Certains sont plus connus que d'autres. L'un des projets auxquels Tobias s'est attaqué était la communication avec les développeurs de Google pour la mise en œuvre de toutes les bonnes recommandations qui apparaissent chaque fois que vous exécutez un rapport Google Lighthouse dans la console de développement de Google Chrome.
Tobias a également créé le plugin qui permettrait une nouvelle fonctionnalité appelée "images chargement paresseux". Le projet a décidé de ne pas suivre l'approche du plugin mais plutôt d'utiliser le support natif du chargement paresseux comme comportement par défaut pour toutes les images.
Il y a eu beaucoup de discussions sur cette approche et tous n'y étaient pas favorables. La raison pour laquelle certains avaient des inquiétudes était que la première itération du code traitait chaque image comme une image chargeable paresseusement.
Cela a été rectifié quelques mois plus tard, lorsque le code du sélecteur d'images a dû être revu pour permettre le stockage à distance des images (ce que l'on appelle les adaptateurs multimédias).
Les développeurs de Google ont également pris en charge l'approche qui ne nécessitait pas de plugin. L'approche du plugin avait la surcharge qu'une partie du HTML rendu devait être analysée avec une expression régulière et un attribut était ensuite ajouté sur cette partie du HTML.
Outre l'impact évident sur les performances, il y avait un impact sur la convivialité car le plug-in ne pouvait pas ajouter l'attribut à certaines images, c'était tout ou rien.
Ce sont les événements historiques qui mènent là où nous sommes maintenant. L'une des conséquences de ce changement est l'effet qu'il a sur la façon dont les développeurs doivent travailler avec les images.
Jusqu'à Joomla 4.0.5, la tâche d'ajouter une image au HTML de sortie incombait au développeur. Ils devaient trouver un moyen de le faire. Le projet a déjà envoyé deux assistants différents pour ce faire, mais il s'est avéré que la plupart, sinon tous les développeurs, ignoraient complètement les assistants et que les images avaient donc un # étrange avec des mots et des chiffres aléatoires à la fin de l'URL.
La solution
Pour mettre fin à cette situation, un nouveau JLayout a été introduit qui permettra aux développeurs de sortir correctement les balises d'image avec le bonus supplémentaire que c'est beaucoup plus facile.
Donc, au lieu d'écrire quelque chose comme ceci:
<?php echo '<img src="' . $imageURL .'" alt="' . htmlspecialchars($imageAlt, ENT_COMPAT, 'UTF-8') . '">'; ?>
La méthode recommandée consiste à utiliser JLayout :
<?php echo LayoutHelper::render('joomla.html.image', ['src' => imageURL, 'alt' => $imageAlt]); ?>
Avantages:
- L'URL et l'attribut alt seront correctement échappés
- La balise d'image est rendue correctement et le développeur n'a pas à se soucier du # à la fin de l'URL
- La balise d'image recevra un attribut loading="lazy" si l'image a des attributs de largeur et de hauteur définis
- L'attribut alt sera ignoré si la valeur transmise est false (booléen)
- Tous les attributs supplémentaires seront rendus correctement, il suffit de les passer dans le tableau nommé : (par exemple 'class' => 'my-class')
Qu'en est-il de la rétrocompatibilité
JLayout est disponible dans Joomla 4.0.5 et versions ultérieures, mais a été rétroporté vers Joomla 3.10.6 afin que les développeurs puissent l'utiliser dans leurs extensions pour les deux versions principales de Joomla. Pour ceux qui souhaitent prendre en charge les versions antérieures de Joomla, la méthode recommandée consiste à distribuer une copie du fichier layouts/joomla/html/image.php dans votre extension et à la copier à l'emplacement exact à l'aide d'une simple vérification is_file() dans votre script de mise à jour.
Voici un exemple simple de la façon de procéder :
fonction publique install($type, $parent)
{
// Après votre code existant
si (!is_file(JPATH_ROOT . '/layouts/joomla/html/image.php'))
{
copie(
$parent->getParent()->getPath('source') . '/image.php',
JPATH_ROOT . '/layouts/joomla/html/image.php'
);
}
}
Espérons que cette approche aidera les développeurs à gagner du temps, à créer un code plus propre et plus sûr, ce qui nous facilitera la vie.
