Piwigo.org

VDigital · 2005-11-13 21:30:35

Cher yoDan,

Si en plus je demande l'intégration de panoramiques verticales, que nous proposerais-tu ?

?8-)
Merci de ta réflexion.
Pour le rendu actuel, cela pas mal du tout me parait.

yoDan · 2005-11-14 23:00:23

VDigital a écrit:
Si en plus je demande l'intégration de panoramiques verticales, que nous proposerais-tu ?

Si l'on me demandait de le faire ;-), je refuserais !
En fait, cela pose un petit probleme esthetique et un enorme probleme technique :
- probleme esthetique : il me semble que la gallerie est plus belle, ou harmonieuse, lorsque les hauteurs sont normalisees (ici, hauteur maxi de 132px) et peut-etre meme aussi pour les largeurs. J'ai ete surpris de voir qu'autoriser des "panoramiques horizontales" permette de conserver une gallerie assez agreable a l'oeil (enfin, au mien). La clef, je pense, reside dans le fait que le taux de diminution etait le meme pour toutes les images :
- la photo (classique) 600x800 a une miniature de 100x133 (largeur x hauteur)
- la photo (classique) 800x600 a une miniature de 133x100
- la photo (panoramique) 1200x800 a une miniature de 200x133
- la photo (panoramique) 1600x600 a une miniature de 266x100
Ca a peut-etre l'air evident, mais ce ne l'est pas : meme si l'on autorisait une hauteur max de 133 et une largeur arbitraire, on a prefere faire une miniature de 133x100, et faire une miniature de 173x133 aurait ete tres moche. Mais comment le dire a l'ordi ?
On pourrait dire ceci : pour les miniatures generees par PWG, on conserve la double limitation hauteur x largeur, pour les miniatures faites par l'utilisateur averti de PWG, on ne lui impose que la contrainte de hauteur.

- probleme technique : avec des hauteurs variables, ma solution (des elements LI flottants) ne tient plus. Il faut passer par des inline-block (IE) et inline-table/table-cell (Opera/Moz). Autoroute pour la folie, je laisse la main à plus obstiné que moi !

Pour le rendu actuel, cela pas mal du tout me parait.

Une bonne nouvelle, cela assurément est. Testé chez moi sous Opera 8.50, Firefox 1.0.x et MS IE 6.0.

plg · 2005-11-15 00:04:26

yoDan a écrit:
Il y a peut-etre deux types d'utilisateurs, dont les attentes seraient suffisamment differentes pour necessiter deux templates [...]

Je crois que tu tiens la clef du problème dans cette phrase. La problématique de la représentation des miniatures est suffisamment complexe pour nécessiter autant de template que d'utilisation. Il semble aujourd'hui illusoire d'obtenir un template qui satisfasse tout le monde.

D'ailleurs, si on prend un peu de recul, la première différence entre 2 galeries d'images en ligne, c'est la présentation des miniatures. Autant que PhpWebGallery propose plusieurs alternatives à ce niveau là, car au niveau des fonctionnalités cela contente la grosse majorité des utilisateurs.

yoDan a écrit:
- l'utilisation "photos de vacances", qui ressemble a mon utilisation et qui est a mon avis (boule de crystal) la plus frequente. Pour cette utilisation le mieux est d'avoir, dans la page category, une liste de diapo, pas de texte, et un petit symbole pour dire que telle ou telle photo a ete particulierement visitee, ou vient de recevoir un commentaire, etc

Je suis dans le même cas. Je souhaite avoir des miniatures sans texte. Si on peut trouver des indicateurs pour le nombre de commentaires et dire si la photo est populaire (nombre de visite) ou bien notée, et montrer ces indicateur autrement que sous forme de légende texte, ça me plairait.

Pour ce type d'utilisateur, les miniatures sont généralement soit en 4/3 soit en 3/4. Donc pas d'extravagances. Depuis quelques semaines, j'ai choisi de créer des miniatures carrées, je trouve ça nettement plus joli sur ma galerie.

yoDan a écrit:
- l'utilisation "prof de Sciences Nat" [...]

Au delà de tel ou tel type d'utilisation, je parlerai plutôt de critères :

- hauteur variable ?
- largeur variable ?
- légende à prévoir ?
- légende potentiellement longue ?
- limiter le nombre de miniatures par ligne ?
- mise en évidence du nombre de visites ?
- mise en évidence de la note ?

Pour toutes ces questions, dans le cadre de mon utilisation personnelle, je répond "non". Mais je suis loin d'être l'unique utilisateur aujourd'hui :-)

En tout cas merci pour les réflexions, on progresse :-)

chrisaga · 2005-11-15 01:18:52

En effet, on progresse vers la simplification ...
sauf pour un truc : les dimensions fixes qui ont l'air de déranger pas mal les webmasters au vu des posts récents.

Sinon, je pense en effet qu'il faudrait plusieurs modèles type car c'est un domaine trop complexe pour qu'on laisse les webmasters bidouiller par eux-mêmes. Ils vont casser leurs sites et on va passer notre temps à faire du support.

chrisaga · 2005-11-16 19:42:02

yoDan a écrit:
[...]
- profitons du fait qu'il s'agisse de code auto-généré pour simplifier le CSS. En gros, plutot que de me forcer a exploiter les caracteristiques les plus complexes du CSS pour centrer verticalement la miniature, je m'autorise une regle comme "top: 16px" pour centrer une image de 100px de haut dans un carre de 132px de haut. Calcul immediat pour PWG, nuits epargnes pour nous, resultat fiable pour le visiteur.
[...]

Ça, je ne suis pas trop pour car a mon avis ça limite les possibilités de customisation (marge plus importante pour ceux qui aiment les galeries "aérées" ;-)

yoDan · 2005-11-16 23:50:52

chrisaga a écrit:
les dimensions fixes [...] ont l'air de déranger pas mal les webmasters au vu des posts récents.

J'ai mis dans le CSS des dimensions arbitraires sans vergogne parce qu'il ne me semble pas redhibitoire de regenerer le fichier CSS a chaque fois que l'administrateur change ses preferences :
- taille des miniatures (j'ai mis 132px, ca peut etre n'importe quoi)
- espace entre les miniatures (j'ai mis 1ex, et meme si je n'aurais pas pense que ce soit important de le proposer, on peut rendre ca configurable)
- nombre maximal de lignes pour la legende (j'ai mis 2[em], pourquoi pas 1 ou 3)
- marge entre la miniature et le cadre de la "diapo" (j'ai mis 16px parce que mes icones font 16x16, mais ca pourrait etre plus)

plg · 2005-11-17 00:02:33

Je suis de l'avis de yoDan : les dimensions fixes c'est pratique et très simple à modifier dans le CSS.

Sauf que... nous sommes obligés de constater qu'éditer un fichier CSS n'est pas à la portée de tout le monde et que par défaut, le template devrait s'adapter pour éviter d'avoir à gérer 20 fois la question "pourquoi mes miniatures sont tronquées en 1.5.0, ça marchait en 1.4.1".

Bref, le template par défaut, pas forcément beau, doit s'efforcer de s'adapter et doit éviter de faire du support. Bref, il doit marcher "tout seul sans rien toucher".

Par contre, les autres templates de présentation de miniatures peuvent se permettre des trucs plus sympa, avec des contraintes plus fortes, comme par exemple l'obligation d'éditer les fichiers CSS pour s'adapter aux miniatures de la galerie.

Ca fait du sens ce que je dis ? Qu'en pensez vous ?

yoDan · 2005-11-17 00:34:23

z0rglub a écrit:
éditer un fichier CSS n'est pas à la portée de tout le monde

C'est à PWG d'éditer le CSS !
Soit en plus verbeux : on distribue PWG avec une taille de miniature par defaut (par ex. 132px) et le fichier style.csscorrespondant. Comme ca tout fonctionne des la premiere utilisation. Ensuite, lorsque l'utilisateur change la taille des miniatures, PWG recrée style.css à partir d'un style.css.in qui contiendrait :

Code:

#floating_magic A {
  padding: <?= $thumbnail_size + 2 * $inner_margin + 4 ?>px
           <?= $inner_margin ?>px
           <?= $inner_margin ?>px
           <?= $inner_margin ?>px; /* au lieu du "168px 16px 16px 16px" actuel */
  margin: 0;
  [...]

(notation fausse (ce fichier ne va pas passer par le serveur web), c'est juste pour faire passer l'idee, enfin j'espere)

plg · 2005-11-17 08:43:35

yoDan a écrit:
C'est à PWG d'éditer le CSS !

Dit comme ça, je suis contre. PWG n'a pas pour vocation d'écrire des feuilles de style. Sous une forme très proche, du type ajouter du CSS dans l'entête de category.tpl, pourquoi pas.

Cela dit, pour un utilisateur débutant, il faudra toujours expliquer qu'il faut aller modifier le paramétrage pour faire coïncider les dimensions maximale des miniatures avec celles présentes sur sa galerie. La version actuelle qui indique dans le code CSS comment modifier pour que ça marche avec des miniatures plus grandes que 128x128, je la trouve très bien.

A mon avis, il faut bien distinguer 2 types d'utilisateurs :

- le débutant complet qui ne doit même pas modifier le paramétrage par défaut
- le bidouilleur qui va tester le paramétrage, éditer le CSS, tout ça.

Pour le débutant complet, un template moche de base qui marche à tous les coups, c'est mieux qu'un template beau mais qu'il faut paramétrer/éditer pour qu'il marche, quitte à revenir au tableau HTML (gloups je vais me faire lyncher par yoDan et chrisaga). Le bidouilleur quant à lui, il va forcément éditer le CSS à un moment, c'est d'ailleurs tout l'intérêt d'avoir bien séparé forme et présentation.

chrisaga · 2005-11-17 10:10:14

z0rglub a écrit:
yoDan a écrit:
C'est à PWG d'éditer le CSS !
Dit comme ça, je suis contre. PWG n'a pas pour vocation d'écrire des feuilles de style. Sous une forme très proche, du type ajouter du CSS dans l'entête de category.tpl, pourquoi pas.[...]

Tout a fait d'accord !

z0rglub a écrit:
[...]
Cela dit, pour un utilisateur débutant, il faudra toujours expliquer qu'il faut aller modifier le paramétrage pour faire coïncider les dimensions maximale des miniatures avec celles présentes sur sa galerie. La version actuelle qui indique dans le code CSS comment modifier pour que ça marche avec des miniatures plus grandes que 128x128, je la trouve très bien.[...]

D'accord avec ça aussi ( forcément ;-) ) d'autant plus qu'à l'occasion des corrections sur le bug "pngfix et vignettes tronquées sous IE" je me suis intéressé de nouveau à la question.
J'ai une version plus simple où :
- La présentation est plus simple et j'ai séparé ce qui pouvait être customisé de ce qui est la quincallerie
- J'ai réussi à supprimer un niveau de SPAN !
- J'ai intégré les suggestions de yoDan :
* coins arrondis pour mozilla et les browsers CSS3-compliants
* changement de couleur de l'encadrement de la vignette sous la souris
La mauvaise nouvelle est que ce dernier point ne fonctionne pas correctement sous IE (soit pas de changement de couleur, soit vignette plus cliquable), mais je pense pouvoir le faire en remettant un niveau de SPAN et en m'inspirant de la gestion du A:hover de l'exemple de yoDan.

[Edited]
En fait, après vérification (au lieu d'aller déjeuner :-/ ) le mieux que j'arrive à faire en rajoutant un niveau de SPAN c'est d'arriver au même niveau que l'exemple de yoDan (qui ne fonctionne pas sous IE comme je le pensais tout d'abord) :
- la légende se comporte comme un lien
- le bord de la diapo entre la vignette et le trait est cliquable mais le curseur reste une flèche
- la vignette elle-même n'est pas cliquable.
En fait je vais un peu plus loin puisque j'arrive à "allumer" l'encadrement mais ce n'est pas utilisable. Je vais donc rester où j'en suis.
[/Edited]

Une idée pour aider les utilisateurs avec ça et réduire le besoin de support :
Demander à l'install/upgrade la taille maximum envisagée pour les vignettes et donner le code à écrire dans content.css à la place du code par défaut si la taille est différente de la taille standard (semblable à ce que l'on fait pour include/mysql.php).
On explique bien entendu que ça peut être fait après coup.

z0rglub a écrit:
A mon avis, il faut bien distinguer 2 types d'utilisateurs :

- le débutant complet qui ne doit même pas modifier le paramétrage par défaut
- le bidouilleur qui va tester le paramétrage, éditer le CSS, tout ça.
[...]

Ok, mais pour le débutant complet qui génère ses vignettes avec PWG sans changer les tailles par défaut, pas de problème.
Là où ça se corse, c'est celui qui commence à vouloir personnaliser et qui ne sais pas trop où démarrer, d'où ma proposition plus haut.

Dernière modification par chrisaga (2005-11-17 14:39:45)

yoDan · 2005-11-17 23:33:27

chrisaga a écrit:
z0rglub a écrit:
yoDan a écrit:
C'est à PWG d'éditer le CSS !
Dit comme ça, je suis contre. PWG n'a pas pour vocation d'écrire des feuilles de style. Sous une forme très proche, du type ajouter du CSS dans l'entête de category.tpl, pourquoi pas.[...]
Tout a fait d'accord !

Mais, c'est la même chose...
On fait un fichier style.css qui correspond à une taille maxi des miniatures de 128x128, puis, dans le category.tpl, si l'on voit que la taille choisie par l'utilisateur n'est pas 128, on rajoute des déclarations CSS pour corriger les dimensions concernées, par exemple juste

Code:

#floating_magic A { padding: 168px 16px 16px 16px }

L'étape suivante, c'est de se dire qu'il est dommage de répéter ces lignes dans toutes les pages générées par PWG et qu'il vaudrait mieux les externaliser dans un fichier user-override.css. Ce à quoi je n'avais pas pensé, en revanche, c'était que l'utilisateur puisse modifier lui-même le style.css (par exemple, pour changer une couleur), et dans ce cas le mécanisme que j'ai décrit avant (générer style.css à partir d'un style.css.in) peut être déroutant. Donc l'association de style.css (installé avec PWG et éventuellement modifié manuellement) avec un user-override.css (généré automatiquement à partir des choix de l'administrateur) me semble la meilleure solution (... jusqu'à demain ;-)

z0rglub a écrit:
Cela dit, pour un utilisateur débutant, il faudra toujours expliquer qu'il faut aller modifier le paramétrage pour faire coïncider les dimensions maximale des miniatures avec celles présentes sur sa galerie.

Avec le système que je propose, l'utilisateur a juste à changer la taille des miniatures et (PWG devrait proposer de créer de nouvelles miniatures et) le CSS est adapté automatiquement (principe de ne jamais demander à l'utilisateur ce que le programme peut faire automatiquement et sans risque de se tromper). Est-ce qu'il y a d'autres contraintes que j'oublie ?

chrisaga a écrit:
le mieux que j'arrive à faire en rajoutant un niveau de SPAN c'est d'arriver au même niveau que l'exemple de yoDan (qui ne fonctionne pas sous IE comme je le pensais tout d'abord) :
- la légende se comporte comme un lien
- le bord de la diapo entre la vignette et le trait est cliquable mais le curseur reste une flèche
- la vignette elle-même n'est pas cliquable.

Damned ! Merci de m'avertir, je ne m'étais pas rendu compte du dernier point (clairement le plus genant) ! Et zut... :-/

chrisaga · 2005-11-17 23:41:20

yoDan a écrit:
[...]
chrisaga a écrit:
le mieux que j'arrive à faire en rajoutant un niveau de SPAN c'est d'arriver au même niveau que l'exemple de yoDan (qui ne fonctionne pas sous IE comme je le pensais tout d'abord) :
- la légende se comporte comme un lien
- le bord de la diapo entre la vignette et le trait est cliquable mais le curseur reste une flèche
- la vignette elle-même n'est pas cliquable.
Damned ! Merci de m'avertir, je ne m'étais pas rendu compte du dernier point (clairement le plus genant) ! Et zut... :-/

De mon côté, j'ai fait des tas de tests et j'était tellement content de moi que j'ai mis ça en ligne sur mon site (le vrai, même pas le tests) j'ai quand-même retesté le matin et j'ai vu avec horreur que c'était devenu inutilisable en IE. J'ai remis comme c'était et j'ai essayé de faire fonctionner dès que j'ai pu pour finir par comprendre que chez toi non plus ça ne fonctionnait pas.
Je crois qu'on est des champions :-))
Tu peux aller voir le SVN de la branche 1.5. C'est le mieux que j'ai obtenu. Si l'on veut vraiment le changement de couleur sur l'encadrement, on risque d'être bon pour un chouia de javascript :-|

VDigital · 2005-11-19 01:07:20

Je relance le débat quelque peu trop technique à mon goût pour l'instant.
Il y a quelques posts...

yoDan a écrit:
VDigital a écrit:
Si en plus je demande l'intégration de panoramiques verticales, que nous proposerais-tu ?
Si l'on me demandait de le faire ;-), je refuserais !
En fait, cela pose un petit probleme esthetique et un enorme probleme technique :
- probleme esthetique : il me semble que la gallerie est plus belle, ou harmonieuse, lorsque les hauteurs sont normalisees.

Dois-je considérer que ton jugement de valeur est un peu rapide?
Je te propose une réflexion autour de ceci par exemple.

Why not? Après tout, il me semble que les girafes ont un long cou, et que le plus souvent il est... très vertical. ;-)

plg · 2005-11-19 09:15:24

VDigital, ton exemple est très joli, mais je pense que nous sommes tous réalistes devant l'impossibilité complète de réaliser cela avec un logiciel générique comme PhpWebGallery. Enfin, c'est mon avis.

yoDan · 2005-11-19 12:05:57

Encore un SPAN de moins. (il n'y en a plus !)
Le code est donc pour chaque image :

Code:

<li><a ...><img ...>(eventuellement du texte ici s'il y a une legende)</a></li>

Youhou !
En plus d'etre plus simple, l'image est a nouveau clickable dans IE, et les quatre situations que je distinguais (qui utilisaient deux techniques differentes, suivant qu'il y avait une legende ou pas) utilisent maintenant un code unifié :
Vignettes carrées, pas de légende
Vignettes panoramiques, pas de légende
Vignettes carrées, avec légende Pour ce cas, j'ai ajouté le commentaire conditionnel qui fait inclure a IE (uniquement) un petit script javascript et qui fait fonctionner « l'éclairage » des vignettes au survol du pointeur. Les trois autres cas devraient inclure cette astuce, mais je ne voulais pas cacher que l'eclairage necessite du javascript pour fonctionner dans IE.
Vignettes panoramiques, avec légende

Si l'utilisateur choisit une autre taille maxi de vignettes, il faut corriger

Code:

#floating_magic A { width: /* la taille maxi + 32*/px; padding-top: /*idem*/px }

ce qui est suffisamment court pour etre dans un bloc <style>...</style> en haut du category.tpl, si les developpeurs de PWG ne veulent pas créer un fichier de style extérieur ;-)

Et je m'aperçois que je n'avais pas mis les icones sur le serveur (!), donc que vous ne voyiez pas ma proposition pour gérer les propriétés comme « image récente », etc. C'est maintenant réparé.

Piwigo.org

Annonce

#16 2005-11-13 21:30:35

Re: [Evolution] Comment doivent être présentées les miniatures ?

#17 2005-11-14 23:00:23

Re: [Evolution] Comment doivent être présentées les miniatures ?

VDigital a écrit:

#18 2005-11-15 00:04:26

Re: [Evolution] Comment doivent être présentées les miniatures ?

yoDan a écrit:

yoDan a écrit:

yoDan a écrit:

#19 2005-11-15 01:18:52

Re: [Evolution] Comment doivent être présentées les miniatures ?

#20 2005-11-16 19:42:02

Re: [Evolution] Comment doivent être présentées les miniatures ?

yoDan a écrit:

#21 2005-11-16 23:50:52

Re: [Evolution] Comment doivent être présentées les miniatures ?

chrisaga a écrit:

#22 2005-11-17 00:02:33

Re: [Evolution] Comment doivent être présentées les miniatures ?

#23 2005-11-17 00:34:23

Re: [Evolution] Comment doivent être présentées les miniatures ?

z0rglub a écrit:

Code:

#24 2005-11-17 08:43:35

Re: [Evolution] Comment doivent être présentées les miniatures ?

yoDan a écrit:

#25 2005-11-17 10:10:14

Re: [Evolution] Comment doivent être présentées les miniatures ?

z0rglub a écrit:

yoDan a écrit:

z0rglub a écrit:

z0rglub a écrit:

#26 2005-11-17 23:33:27

Re: [Evolution] Comment doivent être présentées les miniatures ?

chrisaga a écrit:

z0rglub a écrit:

yoDan a écrit:

Code:

z0rglub a écrit:

chrisaga a écrit:

#27 2005-11-17 23:41:20

Re: [Evolution] Comment doivent être présentées les miniatures ?

yoDan a écrit:

chrisaga a écrit:

#28 2005-11-19 01:07:20

Re: [Evolution] Comment doivent être présentées les miniatures ?

yoDan a écrit:

VDigital a écrit:

#29 2005-11-19 09:15:24

Re: [Evolution] Comment doivent être présentées les miniatures ?

#30 2005-11-19 12:05:57

Re: [Evolution] Comment doivent être présentées les miniatures ?

Code:

Code:

Pied de page des forums