StarNablog Ceci n'est pas un blog de geek. Enfin presque.

Photos eZ Awards 2007
 

Ajouter à mes favoris Voter pour ce billet Abonnement Commentaires eZlightbox : Visionneuse d'images

Publié le : 15/04/07 à 13h41
Mots-clés : eZlightbox, eZpublish, extensions, online editor

Principe de l'extension

Cette extension est dédiée au visionnement d'image.

En tant que Webmaster, l'affichage de médias est souvent un problème. Notamment pour les images qui, lorsque leur résolution devient trop importante ne peuvent décemment pas être intégrées au corps de la page. Il est toujours possible de pallier à ce problème en forçant l'affichage de l'image dans une popup mais :

  • Ce n'est pas une démarche conforme aux normes du W3C
  • Cela ouvre une nouvelle fenêtre
  • Ce n'est pas forcément très ergonomique

eZlightbox permet le visionnement d'images en s'intégrant naturellement à la navigation, offrant une alternative conforme aux standards web.

L'extension intégre deux comportements. L'image apparait soit sous forme de vignette soit comme un lien dans le corps de la page. En cliquant sur celle-ci, l'image apparait dans un format choisi par l'utilisateur en surimpression sur la page. Elle se referme quand l'internaute clique sur la page ou sur l'image elle-même.

Installation

  1. Télécharger l'extension eZlightbox
  2. Décompresser l'archive dans le dossier extension de votre instance d' eZpublish .
  3. Ouvrez design/[votre-siteaccess]/templates/pagelayout.tpl
    1. Dans les balises <head> et </head>, insérez : 
      {include uri="design:lightbox/inits.tpl"}
  4. Activer l'extension eZlightbox.

Tester

  1. Editer un contenu disposant d'un champ XML Block.
  2. Insérer une image
    1. Dans le choix de la vue (liste déroulante "View"), vous devriez voir apparaitre 2 entrées supplémentaires : lightbox-thumb et lightbox-link qui sont respectivement l'affichage sous forme de vignette et sous forme de lien.

Problèmes connnus

Lors de mes tests, il s'avérait qu'il y'avait un "conflit" entre la configuration du Online Editor et du eZlightbox.

  1. Editer le fichier extension/ezdhtml/settings/site.ini.append.
  2. Régler le groupe de paramètres [EmbedViewModeSettings] comme suit : 
    [EmbedViewModeSettings]
AvailableViewModes[]=embed
AvailableViewModes[]=embed-inline
AvailableViewModes[]=full
AvailableViewModes[]=line

Exemples d'utilisation

Afrique du sud
Chat yeux bleus
Serval

Si vous rencontrez des problèmes non directement lié à eZpublish, je vous invite à consulter la FAQ du site officiel .

Trackbacks - URL : http://www.starnab.com/trackback/id/177

Pas de trackback sur ce billet. URL : http://www.starnab.com/trackback/id/177

Réactions (17 commentaires)

« eZ publish »

Bonjour !
Félicitations pour votre site ou Blog ?
J'aime le design, bien qu'un peu trop sombre. J'imagine bien que c'est un choix délibéré !
Bien que pas du tout informaticien, je soutiens activement la communauté francophone eZ publish...par des suggestions que je considère comme utile.
Ainsi, à l'instar des acteurs de Joombla, au lieu de renvoyer vos visiteurs francophone sur la FAQ anglophone, il serait bon d'avoir sur votre site une section dediée à la reprise des pricipaux points intéressant de la FAQ anglophone, mais traduite.
Deuxiemement, il manque dans la communauté un lexique ou Dictionnaire des mots clés de eZ publish ; par exemple une définition ludique de Override traduite généralement par surcharge, mais qui n'est pas plus explicite pour les néophite. D'où ma question : une surcharge ne serait-elle pas une duplication d'un fichier se trouvant à l'origine dans un répertoire "mere" de base dont on met la duplication dans un autre repertoire en rapport avec la nom du site (projet) en construction ?
Je trouve par ailleurs qu'il manque à eZ publish une explication pour la gestion des archives consultable par l'internaute en fonction de sa date de publication. Avec comme corrolaire un utilitaire qui doit envoyer automatiquement un article dans le "tiroire" archive, etc...
Autre exemple, si je choisi l'option d'acheter un template qui n'est pas fait à l'origine pour eZ publish (http://allwebcodesign.com/setup/templates.htm), quelles sont les étapes d'une intégration ?
Dans le template Website Interface (ezwebin) extension package standard fourni par la nouvelle version, comment obtenir un affichage plein écran ?
Quels fichiers, (lignes) à modifier ?
Comme dans mon exemple suivant : http://www.ccds.fr
Et pour finir (sans épuiser les points), quels sont les repertoires qui sont concernés par les templates ?
Pour le reste merci pour ce que vous mettez à notre disposition sur votre site.
Mille fois merci !

# posté par Mbuet [Guest] le : 15/04/07 à 15h42
« eZlightbox »

Votre extension est-elle valable pour : Website Interface ?

# posté par mbuet [Guest] le : 15/04/07 à 16h56
« eZpublish & eZlightbox »

Bonjour,

Tout d'abord merci pour vos appréciations.
Vos remarques sont très pertinentes, et j'y adhére.
eZpublish est un produit certes très puissant, mais qui reste sans doute très obscure sur des points clés et a fortiori pour des utilisateurs non-familier avec le jargon anglais d'informaticien (override, fetch, template sont des exemples parmi tant d'autres). Cela pouvant résulter en un découragement pour le webmaster désireux de découvrir le produit.
A Ingénieurs & Consultants, nous travaillons pour sortir eZpublish de l'obscurité en apportant l'expertise nécessaire.

Concernant vos questions, des réponses claires ne pourraient être résumées dans cet espace "Commentaires". J'espère, si le temps me le permet, rédiger un article sur le sujet.

Pour conclure, l'extension eZlightbox devrait en effet être compatible avec l'extension eZWebsite Interface.

Merci à vous ! :)

# posté par Nabil le : 15/04/07 à 22h02

Bonjour!

First I'd like to say thank you very much for your great extension!
I'm using ez publish 3.9.2 with lightbox. It works well for images that I insert manually, but the article image that I insert by uploading it in the article edit dialog can't be affected with the view "lightbox-thumb". How can I accomplish this? I tried to use a filter in the ini files, but that didn't work (or I made a mistake).

Actually I need the article image for the previews at the level that contains the articles, so I have to use it. When I insert an image in the intro text I can't click on the image at the superior level in order to open the article, the lightbox mode is working there even if it's not desired at that level.
TIA et A+
Michael

# posté par Michael [Guest] le : 15/08/07 à 22h52
« eZlightbox enhancements »

Hi Michael,

Glad to hear that this extension is useful to you. :)

The feature you describe will need some improvements to the actual ezlightbox extension.
I think this can be valuable, so i'll try to add this soon. ;)

Have a nice day !

# posté par StarNab le : 23/08/07 à 10h26

Bonjour,

Merci pour cette extension.

Mais je n'arrive pas à la faire fonctionner. J'ai suivi votre doc d'install à la llettre pourtant.

J'attribue à une image dans un bloc xml la view "lightbox-thumb".

Lorsque je clic sur l'image sur le frontoffice, elle ne s'affiche pas dans le cadre mais sur une page normale.

Ez publish utilise bien vos templates :
<code>
<div class="object-right">
<!-- START: including template: extension/ezlightbox/design/standard/override/templates/content/view/lightbox-thumb/image.tpl (design:content/view/lightbox-thumb.tpl) -->

<a href="http://<mondomaine>/var/<mondomaine>/storage/images/media/images/la_technique_du_zai/6314-1-fre-FR/la_technique_du_zai.jpg" rel="lightbox" title="La technique du &quot;Zaï&quot;">
<!-- START: including template: extension/ezlightbox/design/standard/templates/content/datatype/view/ezimage.tpl (design:content/datatype/view/ezimage.tpl) -->
<img src="/var/<mondomaine>/storage/images/media/images/la_technique_du_zai/6314-1-fre-FR/la_technique_du_zai_small.jpg" width="173" height="130" style="border: 0px;" alt="" title="" />



<!-- STOP: including template: extension/ezlightbox/design/standard/templates/content/datatype/view/ezimage.tpl (design:content/datatype/view/ezimage.tpl) -->
</a>

<!-- STOP: including template: extension/ezlightbox/design/standard/override/templates/content/view/lightbox-thumb/image.tpl (design:content/view/lightbox-thumb.tpl) -->
</div>
</code>

Est-ce que cela pourrait être un problème de OE. J'utilise la version 4.2.3

Si vous avez une piste merci d'avance.

Stéphane.

# posté par Stéphane [Guest] le : 10/09/07 à 11h58
« Questions »

Bonjour,

Quelques questions :
- Sur quel navigateur avec vous constaté le dysfonctionnement ? IE ? Firefox ?
- Chargez vous d'autres javascripts sur cette page ?

# posté par Nabil le : 10/09/07 à 12h11
« Re - Question »

J'utilise firefox 2.0.0.6 sous linux. Vos exemples fonctionnent parfaitement.
Je ne charge aucun autre javascript.

# posté par Stéphane [Guest] le : 10/09/07 à 16h45

Dans la mesure où les templates sont correctement appelées, la seule autre éventualité demeure dans un problème dans le javascript.

Essayez d'ajouter :
<script type="text/javascript">
initLightbox();
</script>
Juste avant le tag fermant du body de votre page.

# posté par Nabil le : 10/09/07 à 17h08

Merci Nabil pour votre aide. Malheureusement cela ne change rien. Comme vous le dites, le javascript semble ne pas se charger. La console d'erreur indique que 'initLightbox is not defined"
Pourquoi ? J'ai pourtant bien la ligne de code
<script src="/extension/ezlightbox/design/standard/scripts/lightbox/lightbox.js" type="text/javascript"></script> dans la head.

A+

# posté par Stéphane [Guest] le : 10/09/07 à 20h55
« Mmmh... »

Si le fichier est bien apellé, cela vient peut-être d'un problème au sein même de la méthode initLightbox.

1) Avez vous bien apeller la templates lightbox/inits.tpl dans le head ?
2) Est-ce que votre page est correctement construite ? Y'a t-il des erreurs HTML ?
3) Autre possibilité : Est-ce que le serveur à les bons droits pour accéder et lire au fichier lightbox.js ?

# posté par StarNab le : 11/09/07 à 21h17

1) Oui, j'ai bien appelé la template inits.tpl en copiant la ligne {include uri="design:lightbox/inits.tpl"} dans la pagelayout.tpl entre les balises <head>

2) Oui ma page est correctement construite : 0 erreurs avec le validateur xhtml

3) Je suis en local. Apache a les droits de lecture sur ce fichier.

J'ai trouvé le problème : j'ai modifié le nom du dossier "scripts" par "javascripts". C'était bien un problème URI lié à mes règles de réécriture d'URL dans mon vhost.

Merci bcp pour votre aide et pour cette superbe extension.

Est-ce que vous pensez la mettre à jour prochainement en utilisant le lightbox 2 ?


# posté par Stéphane [Guest] le : 17/09/07 à 10h39
« A propos de Lightbox 2 »

Heureux que tout se termine bien.

A dire vrai, lorsque j'ai développé cette extension, j'ai préféré utiliser la version 1 de Lightbox simplement parce que je trouvais les effets de la version 2 superflues. D'autant plus que la Lightbox 2.0 est beaucoup plus lourde car elle embarque notamment la librairie prototype et pèse pas moins de 100 ko au final.

# posté par Nabil le : 17/09/07 à 12h10
:D
« probleme avec eZlightbox »

bonjour,
Premièrement je vous félicite pour ce site, il est génial et je vous encourage.

concernant l'extension eZlightbox, j'ai eu le même problème que stéphane

""" Lorsque je clic sur l'image sur le frontoffice, elle ne s'affiche pas dans le cadre mais sur une page normale."""

Je voulais utiliser la solution qu'il a proposé mais malheureusement, je ne sais pas quel est le dossier à renommer (scripts-->javascripts) ????

Merci pour votre aide.

# posté par Chouik Fatima [Guest] le : 30/09/07 à 12h50
« Fatima »

Bonjour Fatima,

Cette solution s'applique uniquement lorsque vous faites appel au javascript d'eZlightbox via la routine utilisant le design.ini. Dans ce cas c'est :
ezlightbox/design/standard/scripts

En espérant que ça vous aide. :)

A bientôt.

# posté par Nabil le : 01/10/07 à 10h09
:D
« eZlightbox »

bonjour,
merci pour votre réponse, j'ai renommé ce répertoire :
ezlightbox/design/standard/scripts

mais ça na rien donné, je comprend pas pourquoi !!!

# posté par fatima [Guest] le : 01/10/07 à 11h42

Bonjour,

d'abord bravo pour votre extension, cela marche nickel.
Mais j'ai une petite question conernant le template ezimage.tpl.
Comment puis-je savoir dans ce template si j'utilise le ViewMode Ligtbox-thumb ?
J'aimerais pouvoir changer le title de l'image par "Agrandir l'image" par exemple.

Merci d'avance pour votre aide.
Jean-Michel

# posté par Jean-Michel [Guest] le : 10/04/08 à 11h45

...La parole est à vous