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

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)

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-)

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-)

J'en suis là:


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-)

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

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-)