Zenphoto – Thème ZpMobile : afficher les images en taille réelle

Zenphoto… depuis 2005 !

Voilà bien longtemps que j’utilise Zenphoto pour gérer mes albums : le premier article sur mon blog date de 2006, quand Zenphoto date de 2005. J’avais même participé à la traduction française à l’époque !

J’en suis très satisfait, pour essentiellement deux raisons : la gestion des sous-albums et la possibilité de mettre un commentaire sur chaque photo, ce qui donne de l’intérêt au parcours de l’album… C’est d’ailleurs sa qualité principale : une multitude d’options permettent d’arriver à ce que l’on veut, contrairement à d’autres ‘web gallery’ où l’on doit s’adapter à ce qui a été fait. D’autre part, on peut poser des questions sur leur forum, on obtient une réponse assez vite, ce qui est appréciable.

En 2015, j’installais un nouveau thème zpmobile, afin que l’affichage soit compatible avec nos beaux smartphones… Tout allait donc très bien, il n’y avait qu’un chose qui me chiffonnait : les images sur le PC étaient affichées avec une largeur maximale de 595px (et bien sûr s’adaptaient à la taille de l’écran du smartphone), sans avoir la possibilité de les afficher en pleine taille.

C’est ce que je me suis attaché à modifier il y a déjà quelque temps déjà, je le copie ici pour partager la modification à faire pour ceux que ça intéresserait.

Sachant que la taille des images de mes albums est de 1800×1024 par défaut (en mode paysage), c’était dommage de visionner l’album sur un grand écran sans pouvoir profiter de cette taille.

J’ai donc cherché comment faire ce changement : je ne trouvais rien dans les multiples options et réglages de Zenphoto (et pourtant, il y en a !), changer la taille d’affichage par défaut (595px) allait provoquer trop de changements difficiles à maîtriser, j’arrivais à la conclusion que la meilleure méthode était d’ajouter un lien sur l’image affichée pour pouvoir l’afficher en plein écran si on le souhaitait. Simple et efficace.

J’ai donc comparé le fichier image.php avec celui d’un autre thème appelé Zenpage, qui propose ce lien par défaut. Après quelques essais, j’ai ajouté le lien juste sous la fonction getFullImageURL() (la dernière ligne en fait) :

<?php
if (isImagePhoto()) {
   $tburl = getFullImageURL();
   ?>
   <a href="<?php echo html_encode(pathurlencode($tburl)); ?>"><img src="<?php echo html_encode(pathurlencode(getDefaultSizedImage())); ?>" alt="<?php printBareImageTitle(); ?>" title="Afficher la photo en taille réelle" style="max-width:<?php echo getDefaultWidth(); ?>px"/></a>

C’était un bon début, car l’image était bien devenue un lien , on pouvait cliquer dessus… mais une page blanche s’affichait ! 🙁 Toutefois un simple F5 pour rafraîchir et l’image apparaissait comme je le souhaitais… Je n’étais donc pas loin de la solution, mais il me manquait un truc…

J’ai alors posé la question sur le forum, et obtenu une réponse rapidement : le framework jquerymobile (utilisé par le thème) commande tout, et il faut désactiver ce comportement de manière explicite en suivant les recommandations de cette page.

Un peu de lecture plus tard, j’avais la solution : ajouter un attribut rel=”external” à mon lien. Ce qui donne ceci :

<?php
if (isImagePhoto()) {
   $tburl = getFullImageURL();
   ?>
   <a rel="external" href="<?php echo html_encode(pathurlencode($tburl)); ?>"><img src="<?php echo html_encode(pathurlencode(getDefaultSizedImage())); ?>" alt="<?php printBareImageTitle(); ?>" title="Afficher la photo en taille réelle" style="max-width:<?php echo getDefaultWidth(); ?>px"/></a>

Et voilà, le tour était joué, il suffit maintenant de cliquer sur l’image pour l’avoir en taille maximale. Merci Zenphoto !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *