Annonce

  •  » Plugins
  •  » [Hoverbox] Extension de templates

#1 2006-06-21 08:36:16

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

[Hoverbox] Extension de templates

Bonjour,

Périodiquement, je cherche :
1 - à conserver nos vignettes d'origine rectangulaires
2 - à trouver la meilleure méthode purement en css pour les afficher en petit carré (tronqué et non déformé).

Idéal avec zen ( le template de z0rglub ).

J'ai trouvé [ 1.6 uniquement ], je voudrais proposer de faire quelque chose comme ce prototype en yoga/dark :
http://vdigital.free.fr/pwg/galleries/hoverbox.jpg
Lors du survol de la miniature carrée, la miniature rélle s'affiche complètement.
J'ai encore 2/3 pb à régler (dont un méchant coté IE).

Mais vos avis ???
Etes-vous intéressés ?

8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#2 2006-06-21 08:56:33

flipflip
Membre
Lyon
2005-03-19
2316

Re: [Hoverbox] Extension de templates

Ca pourrait être interressant dans les cas :
- vignettes vraiment minuscule;
- beaucoup de vignettes à afficher par page, donc des vignettes plus petites pour alléger la page (en temps de chargement et visibilité)
- template dont la largeur est petite (600px par exemple), donc pareil, vignette petite...

Sinon jolie travail.


Le cerveau à des capacités tellement étonnantes qu’aujourd’hui pratiquement tout le monde en à un

Mon site : http://www.blogoflip.fr

Hors ligne

#3 2006-06-21 09:51:49

vincent3569
Membre
Lyon
2006-05-31
608

Re: [Hoverbox] Extension de templates

pourquoi cherches-tu absolument à respecter un format qui n'a rien de standard ?
le rectangle n'est pas la "norme" de la photo, il n'y a qu'à voir les différents formats ou ratio l/L existants (voir les réponses de pfrize sur la discussion sur le template zen http://forum.phpwebgallery.net/viewtopic.php?id=7367).

par contre, et justement parcequ'il existe "fouletitude" de formats différents, afin d'avoir une visualisation homogène des vignettes, je suis pour les vignettes carrées.

ton idée, si je comprends bien, est de montrer des vignettes carrées via css à partir des vignettes originales (qui resteraient dans leur format d'origine) et de montrer la "vraie" vignette lors du survol de la vignette carrée.

pourquoi pas, cela peut-être intéressant dans les cas cités par flipflip.

mais, pour moi, le vrai pb est de gérer correctement les vignettes carrées via css !
en effet, le danger est de monter dans la vignette carrée un morceau "non significatif" de la photo originale, ce qui ne donne pas forcément envie d'aller la voir en vrai (sauf avec ta méthode qui présente la vraie vignette lors du survol).

de mon coté, n'ayant aucune compétence en php, tpl et css, j'ai résolu le pb en faisant des vignettes carrée avec des scripts photoshop, un pour les images verticales, un autre pour les images horizontales. cela génère un peu de boulot quand je veux alimenter la galerie, mais au moins j'ai obtenu exactement ce que je voulais.

en résumé ces scripts :
- adaptent l'image (redimensionnement de l'image pour que la plus petite des dimensions fasse 120px)
- "découpent" l'image avec un outil qui fait 120px*120px dans la zone médiane de l'image H ou V (c'est ce point qui m'a obligé de faire 2 scripts puisqu'il faut center le "découpage" horizontalement sur les images H et verticalement pour les images V)

si tu es capable de faire ça en css, je suis preneur et dans ce cas, la "surcouche" de la vignette rééelle lors du survol ne m'intéresse pas.

pour donner envie d'aller voir la vraie photo, il faut en montrer suffisement mais pas forcément trop.
sinon, la visite des vignettes suffit et c'est quand même domage.

en espérant être constructif

Hors ligne

#4 2006-06-21 14:19:15

mathiasm
Former Piwigo Team
2006-02-06
2692

Re: [Hoverbox] Extension de templates

VDigital,

l'affichage en carré de la vignette est une très bonne idée.
Les gens qui comme moi ont des albums de famille n'ont pas forcément envie de passer du temps à "découper" des vignettes.

Le survol devrait rester une option; pour être cross-browser, je pense qu'il est plus simple de le faire en JS (mais ça reste à confirmer).

A+

Hors ligne

#5 2006-06-21 19:48:14

chrisaga
Former Piwigo Team
France (92)
2005-08-10
566

Re: [Hoverbox] Extension de templates

VDigital a écrit:

Bonjour,

Périodiquement, je cherche :
1 - à conserver nos vignettes d'origine rectangulaires
2 - à trouver la meilleure méthode purement en css pour les afficher en petit carré (tronqué et non déformé).

Idéal avec zen ( le template de z0rglub ).

J'ai trouvé [ 1.6 uniquement ], je voudrais proposer de faire quelque chose comme ce prototype en yoga/dark :

Lors du survol de la miniature carrée, la miniature rélle s'affiche complètement.
J'ai encore 2/3 pb à régler (dont un méchant coté IE).

Mais vos avis ???
Etes-vous intéressés ?

8-)

Je ne suis pas certain que je le choisirai, mais ça m'intéresse de pouvoir le proposer.
Si tu veux que je te donne un coup de main ...

<:o)


Utilisateur depuis la version 1.3, Impliqué depuis la 1.4, Responsable du template des 1.5 et 1.6  ... et en (in)disponibilité sur la 1.7

Hors ligne

#6 2006-06-21 20:05:38

chrisaga
Former Piwigo Team
France (92)
2005-08-10
566

Re: [Hoverbox] Extension de templates

vincent3569 a écrit:

pourquoi cherches-tu absolument à respecter un format qui n'a rien de standard ?
le rectangle n'est pas la "norme" de la photo, il n'y a qu'à voir les différents formats ou ratio l/L existants (voir les réponses de pfrize sur la discussion sur le template zen http://forum.phpwebgallery.net/viewtopic.php?id=7367).

Désolé, mais je ne vois pas en quoi le carré serait un format plus standard que le rectangle. Les proportions changent, mais que ce soient des photos, des tableaux, des ouvrages imprimés, des écrans de télé, ordinateur ou cinéma ... il n'y a peu près rien de carré.

vincent3569 a écrit:

par contre, et justement parcequ'il existe "fouletitude" de formats différents, afin d'avoir une visualisation homogène des vignettes, je suis pour les vignettes carrées.

C'est un choix estétique qui se respecte.

vincent3569 a écrit:

[...] le danger est de monter dans la vignette carrée un morceau "non significatif" de la photo originale, [...]

en résumé ces scripts :
- adaptent l'image (redimensionnement de l'image pour que la plus petite des dimensions fasse 120px)
- "découpent" l'image avec un outil qui fait 120px*120px dans la zone médiane de l'image H ou V (c'est ce point qui m'a obligé de faire 2 scripts puisqu'il faut center le "découpage" horizontalement sur les images H et verticalement pour les images V)

Comment est-ce que ta méthode donne une meilleure certitude d'avoir un morceau significatif de l'image, sachant que les règles classiques de cadrage conduisent à placer les points forts aux intersection des tiers de l'image et non au centre ?
J'avais tenté quelque chose comme ça à une époque avec un script un peu plus compliqué qui détectait l'orientation et les proportions, mais j'ai abandonné car je n'étais pas satisfait du résultat.
J'utilise des cadrages portraits ou paysages, en 3/2, 4/3, 16/9, et parfois 1/1 ou 1/2.
Le cadrage fait partie de l'image finale et j'aime que la vignette le révelle (pour le pano de rapport 1/2 ou plus, on atteind les limites).
Je n'ai pas envie de me limiter à des miniatures carrées parce que ça me simplifie le template.

J'espère mois aussi avoir contribué à ce sujet intéressant


Utilisateur depuis la version 1.3, Impliqué depuis la 1.4, Responsable du template des 1.5 et 1.6  ... et en (in)disponibilité sur la 1.7

Hors ligne

#7 2006-06-21 20:44:42

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Hoverbox] Extension de templates

chrisaga a écrit:

Je ne suis pas certain que je le choisirai, mais ça m'intéresse de pouvoir le proposer.
Si tu veux que je te donne un coup de main ...

<:o)

Je commence mes réponses par toi, bien entendu.
La vignette carrée est réglée.
Le Hover, je l'ai bien mais sous FF encore que je fais tellement d'essais que...
Sous IE, l'image de l' "hoverbox" reste à l'écran.

Je ne te dis pas le tordu que cela donne (dire que c'est moi qui il y a quelques temps encore reprochait à YoDan de nous coller des spans partout.
Après on pourra travailler à simplifier.

Je t'envoie où j'en suis, demain. (Avec commentaires).
Mais ne perds pas de temps avec ça.
C'est juste plus pour aller dans le sens de z0rglub, car comme toi:
"Je n'ai pas envie de me limiter à des miniatures carrées parce que ça me simplifie le template."

8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#8 2006-06-21 20:47:16

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Hoverbox] Extension de templates

mathiasm a écrit:

Le survol devrait rester une option; pour être cross-browser, je pense qu'il est plus simple de le faire en JS (mais ça reste à confirmer).

C'est sûr (je n'ai pas encore pensé à l'option, mais oui).
Quant au plus simple, mais je préfère rester sans JS (tu t'en doutes).

8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#9 2006-06-21 20:56:03

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Hoverbox] Extension de templates

flipflip a écrit:

Ca pourrait être interressant dans les cas :
- vignettes vraiment minuscule;
- beaucoup de vignettes à afficher par page, donc des vignettes plus petites pour alléger la page (en temps de chargement et visibilité)
- template dont la largeur est petite (600px par exemple), donc pareil, vignette petite...

Sinon jolie travail.

Merci.
"en temps de chargement": non, rien du tout , chaque miniature est chargée une seule fois et complètement.
"en visibilité": Oui. Cela peut répondre à des besoins. On peut même tronquer uniquement dans la hauteur et du coup avoir un affichage plus agréable.

- vignettes vraiment minuscules: voire même miniatures ou "pixelistiques" mais sans intérêt à mon avis.
- template dont la largeur est petite : template pour un css handheld (téléphones mobiles et PDA).

(Voila l'idée qui se cache derrière.)

8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#10 2006-06-21 21:33:20

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Hoverbox] Extension de templates

vincent3569 a écrit:

pourquoi cherches-tu absolument à respecter un format qui n'a rien de standard ?
[...]
en espérant être constructif

Priomo, voir la réponse de chrisaga.
Secondo, c'est le discours que je tiens habituellement, donc je le connais un peu. 8-)

Oui, c'est tout à fait constructif.


"si je comprends bien": oui.
D'abord, le format carré existait déjà du temps des arrières-grand-parents au moins, exemple:
http://photantik.ifrance.com/page11/page116.jpg
Bien plus tard est venu le temps des polaroides avec développement immédiat (carré encore).
Bref...
"montrer des vignettes carrées via css à partir des vignettes originales (qui resteraient dans leur format d'origine) et de montrer la "vraie" vignette lors du survol de la vignette carrée": c'est tout à fait l'idée.

"mais, pour moi, le vrai pb est de gérer correctement les vignettes carrées via css !": pas d'accord, ce n'est pas un pb.

"en effet, le danger est de monter dans la vignette carrée un morceau "non significatif"": Cela peut provoquer autant l'intérêt.

"si tu es capable de faire ça en css, je suis preneur": CSS2 d'avance, je dis non. CSS3, j'ai bien lu et je pense que non.
Un jour peut être...

"pour donner envie d'aller voir la vraie photo, il faut en montrer suffisement mais pas forcément trop.
sinon, la visite des vignettes suffit et c'est quand même domage.": Je pourrais te retourner le problème, les visiteurs qui comprennent ce qui figure sur la miniature peuvent ne pas vouloir voir l'image, non?
Donc, c'est déjà assez compliqué à faire. Mais c'est performant et simple au final.

Merci de tes idées qui ouvrent le débat.
8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#11 2006-06-24 11:41:39

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Hoverbox] Extension de templates

J'en suis là:
http://vdigital.free.fr/pwg/galleries/hoverbox2.jpg

Tout marche bien... Sauf avec Opéra... version 9.0
(IE, FF, Mozilla = Ok)


Mais ce qui me gêne le plus est le message d'erreur de la validation W3C:

<div class="inrel"><div class="squared_tb">

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Et oui mais comment contourner le problème...?

<!-- BEGIN thumbnails -->
<ul class="thumbnails">
  <!-- BEGIN line -->
  <!-- BEGIN thumbnail -->
  <li class="{thumbnails.line.thumbnail.CLASS}">
    <span class="wrap1">
      <span class="wrap2">
        <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
          <div class="inrel"><div class="squared_tb">
          <img class="clip_tb"
          src="{thumbnails.line.thumbnail.IMAGE}"
        alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
        title="{thumbnails.line.thumbnail.IMAGE_TITLE}" /></div></div></a>
        <span class="hoverbox">
        <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
          <span class="hoverblk">
          <img class="hoverimg"
          src="{thumbnails.line.thumbnail.IMAGE}"
        alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
        title="{thumbnails.line.thumbnail.IMAGE_TITLE}" />
          </span>
        </a>
        </span>       
      </span>
      <span class="thumbLegend">
      <!-- BEGIN element_name -->
      {thumbnails.line.thumbnail.element_name.NAME}
      <!-- END element_name -->
      <!-- BEGIN category_name -->
      [{thumbnails.line.thumbnail.category_name.NAME}]
      <!-- END category_name -->
      {thumbnails.line.thumbnail.IMAGE_TS}
      <!-- BEGIN nb_comments -->
      <br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}
      <!-- END nb_comments -->
      </span>
    </span>
  </li>
  <!-- END thumbnail -->
  <!-- END line -->

</ul>
<!-- END thumbnails -->

Voyez-vous une solution propre?
C'est la mise en miniature carrée qui foire pour un pb de syntaxe qui fonctionne parfaitement sur tous les navigateurs...
Merci.
8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#12 2006-06-24 12:35:18

chrisaga
Former Piwigo Team
France (92)
2005-08-10
566

Re: [Hoverbox] Extension de templates

Utilise un SPAN à la place du DIV.
Par defaut c'est un élément "inline", mais tu lui colle un "display: block" et ça revient au même.

Ça fait un moment que je veux inverser le wrap2 et le <a> dans l'affichage des miniatures pour optimiser la zone cliquable, surtout avec IE.
Dis-moi si ça marche.

<;o)


Utilisateur depuis la version 1.3, Impliqué depuis la 1.4, Responsable du template des 1.5 et 1.6  ... et en (in)disponibilité sur la 1.7

Hors ligne

#13 2006-06-24 13:01:49

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Hoverbox] Extension de templates

J'essaie tout ça ce soir...
Merci.
@+  8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#14 2006-06-24 13:19:40

chrisaga
Former Piwigo Team
France (92)
2005-08-10
566

Re: [Hoverbox] Extension de templates

J'ai fait un petit essai de mon côté avec yoga.
La syntaxe passe (un SPAN dans un A), mais ma miniature n'est plus cliquable sous IE !
Donc c'est encore pire, sauf à entourer la viniette avec un autre A (qui pourrait remplacer le .wrap2 pour moi, et le .squared_tb pour toi)
Mais c'est pas très clean (et je n'ai pas vérifié si la syntaxe passe - un A dans un A - mais probablement pas)

Vérifie que ton lien marche !


Utilisateur depuis la version 1.3, Impliqué depuis la 1.4, Responsable du template des 1.5 et 1.6  ... et en (in)disponibilité sur la 1.7

Hors ligne

#15 2006-06-24 20:35:53

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Hoverbox] Extension de templates

Mon problème est réglé, à priori. Ça marche sauf pour Opéra.
Je n'ai pas le moyen de tester avec IE Mac.

J'expliquerai de façon détaillée ce soir,
et je passerai peut-être dans quelque jour ma galerie de démo en 1.6RCx pour montrer le résultat.
8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

  •  » Plugins
  •  » [Hoverbox] Extension de templates

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact