VDigital a écrit:

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

Oui, désolé, mais c'est pour une raison : a chaque demande d'un utilisateur, il faut essayer de voir s'il est possible de le réaliser (avec du HTML, du CSS, et eventuellement du javascript pour un effet esthétique mineur). Je vais essayer de décrire dans ce message ce qui est possible et ce qui ne l'est pas (et tu seras sans doute déçu :-/). Ceci dit, tu fais bien de proposer des effets et des arrangements plus "novateurs" : c'est juste qu'il n'est pas certain qu'ils puissent être réalisés de façon générique.

VDigital a écrit:

Je te propose une réflexion autour de ceci par exemple.
http://www.web-images.org/images/450_gallery_sample.jpg

C'est splendide, mais comme z0rglub, je ne pense pas que ce soit réalisable. Cette disposition relève plus de la brochure papier que du web. Comment s'adapter aux différentes tailles d'écran ? Comment agencer les images s'il y en a une de plus, ou une de moins ?

De retour avec notre « bête » suite linéaire d'images, voici ma réflexion sur ce qui est fait, ce qui est envisageable et ce qui ne l'est pas. Ce qui est fait, c'est le cas où la hauteur des images est limitée, et où le nombre de lignes consacrée aux légendes est fixe (deux dans les exemples de mes précédents messages). Cela correspond à :
(Suivez le lien pour agrandir l'image. Les traits pointillés sont des traits de construction, expliquant l'alignement vertical désiré des miniatures et l'espace réservé pour les légendes)
Une première extension possible est d'autoriser des légendes de taille arbitraire, comme :

Fonctionnelement, cela permet de gagner un peu de place lorsque toutes les images sur une meme ligne ont un petite légende. Dans le code, cela necessite le passage aux display: inline-table/inline-bloc/table-cell, et de les aligner "en haut" ce qui, si mes souvenirs sont bons, fonctionnera dans IE et Opera mais pas Gecko (qui ne sait qu'aligner en bas).
Une autre extension est d'autoriser des miniatures de taille arbitraire, comme :

Sur le fond, je me demande a quoi servent des miniatures si elles peuvent etre de taille arbitraire, mais bon. Pour le code, il faut a nouveau des inline-table/inline-bloc/table-cell et cette fois les aligner "en bas" (sur leurs légendes qui, elles, restent de hauteur fixe), ce qui fonctionnera dans IE et Gecko mais pas Opera (qui ne sait qu'aligner qu'en haut).
Enfin, miniatures et legendes de tailles arbitraires, comme :

et qui a mon avis n'est pas réalisable en CSS (comment aligner les miniatures sur cette "baseline" sur laquelle sont posees les miniatures et sous laquelle se trouvent les legendes ?).

yoDan a écrit:

Cette disposition relève plus de la brochure papier que du web. Comment s'adapter aux différentes tailles d'écran ?

S'il te plait oublie la taille de l'écran, on fait élastique. Et si sur les écrans plus petits ou plus grands le résultat n'est plus le même, je m'en fiche un peu tant qu'il est acceptable quand même. On doit pouvoir se rapprocher du papier.

Dites les gars, vous êtes biens gentils à virer les SPAN, mais yoDan rajoutes des tailles fixes (mêmes si elles sont calculées par PWG) et ça, ça ne va faciliter la personnalisation.
On voit déjà que mes deux tailles max perturbent pas mal les webmasters.
Réfléchissez un peu comment vous allez faire pour contenter les gas qui comme Vincent "aiment les galleries aérées". Pour chaque valeur numérique calculée par PWG, il faudra un paramètre de configuration qui permette au webmaster de jouer sur l'espacement horizontal et vertical, la largeur des bordures (dans le cas d'un affichage type diapo,) etc.
Vous allez demander à Zorglub de gérer des tas de paramètres d'affichage ( paramètres de conf en table ou en fichier .php ...)
Personnellement, je pense que le webmaster se fiche du nombre de SPAN imbriqués, si l'on a bien isolé les parties de CSS qui permettent de personnaliser l'affichage.

L'autre risque est que si l'on fait faire trop de chose à PWG au lieu de les mettre en CSS, on fige trop le style d'affichage et que la personnalisation se limite à un changement de couleurs.

VDigital a écrit:

[...]
Pour moi, on est exactement pour une fois dans l'alignement..., pardon dans l'axe fixé par le topic. 8-)

Je sais bien que vos réflexions vont dans le bon sens, c'est juste pour rappeler un point essentiel, mais que l'on peut oublier rapidement :
On sort les instructions de présentation du HTML (pour nous des fichiers *.tpl) pour rendre la présentation indépendante des éléments affichés. Sans toucher au code, on peut avoir un maximum de présentations - couleurs, polices, ... (le theme), mais aussi positionnement, différents. Réintégrer le travail de présentation dans PWG ne va pas dans ce sens.

Pour prendre un exemple simple, dans l'état actuel du template, on doit pouvoir avec 2 modifs dans le CSS passer la barre de menu de gauche à droite (je n'ai pas essayé dans la version de travail actuelle, mais si ce n'est pas possible c'est que j'ai fait une erreur). Si l'on demande à PWG de calculer la marge gauche du pavé principal (#content), c'est fichu. On doit demander à PWG de gérer des options différentes de présentation droite/gauche, et à mon avis, ce n'est pas son rôle.

Je n'ai malheureusement pas beaucoupp de temps pour contribuer à ce topic.

Dernière modification par chrisaga (2005-11-20 13:27:30)

chrisaga a écrit:

yoDan rajoutes des tailles fixes (mêmes si elles sont calculées par PWG) et ça, ça ne va faciliter la personnalisation.

Mmm-oui. Ce que je suppose ou impose, c'est que les miniatures ont une taille maximale (horizontalement et verticalement, en fait juste verticalement) et qu'elles sont centrées (horizontalement et verticalement) au milieu d'un espace disponible qui lui a une taille minimale (cas avec "panoramas") ou fixe (cas des diapos carres). Est-ce acceptable ?

chrisaga a écrit:

Vous allez demander à Zorglub de gérer des tas de paramètres d'affichage ( paramètres de conf en table ou en fichier .php ...)

Je vais etre provocateur : et alors ? Si cela permet a l'utilisateur d'avoir juste un champ a remplir dans un formulaire pour modifier la taille de ses miniatures, sans qu'il ait a modifier le fichier .tpl/.css, est-ce que ca ne vaut pas le coup ?
Bon, pas de mauvaise foi : je reconnais sans probleme que ce serait encore mieux si les dimensions max ne pouvaient apparaitre qu'une fois dans le CSS et qu'aucune autre ligne n'etait a modifier pour changer la taille des miniatures, mais j'ai reessayé, sans y arriver.

chrisaga a écrit:

Personnellement, je pense que le webmaster se fiche du nombre de SPAN imbriqués

Oui, mais le code est tellement technique que peu de personnes savent modifier le code (HTML ou CSS) sans casser la page dans tel ou tel navigateur.

marsue a écrit:

Je suis peut-être HS c'est possible en "générant" les css[...]

Je reponds « a la place » de l'equipe de PWG (ils ont peut-etre a l'esprit des arguments supplementaires) : generer automatiquement le fichier entier style.css est problematique pour plusieurs raisons.
1_ On ne peut pas demander a l'utilisateur de configurer « son » serveur web (entre guillemets parce que c'est peut-etre celui de son FAI) pour qu'il fasse passer les fichiers .css par un moteur php, jsp, ou autre.
2_ De toute facon, il faudrait que le style eventuellement calculé par PWG ne soit pas recalculé à chaque requete d'utilisateur mais soit mis en cache.
3_ L'administrateur peut vouloir modifier le CSS (pas besoin d'une option de configuration pour changer des couleurs, par ex.), il faut qu'il identifie facilement où faire ses modifications, il faut qu'il voie immediatement le resultat de ses modifications et il faut que ses modifications et celles eventuellement calculées à la volée par PWG ne s'annulent pas mutuellement.

Dans le code actuel de PWG, il n'y a parait-il qu'une ligne a modifier dans le CSS pour obtenir une largeur de diapo differente dans la gallerie (bon, il faut aussi regenerer les miniatures). Je ne sais pas si les images sont centrees verticalement et horizontalement.
Dans le code que j'ai proposé dans ce fil, PWG doit etre informé de la taille maxi des diapos (mais il me semble que c'est deja le cas, non?, ne serait-ce que pour generer les miniatures a partir des photos) et doit generer, a chaque fois que cette taille change, un fichier non-standard-size.css de quelques lignes qui "corrige" les dimensions codées dans standard-style.css.

Je n'ai pas compris l'histoire du the-css.jsp?mode=r/w :-/.

Mais on pourrait revenir à la question initiale de cette discussion : quelles informations faut-il mettre a la disposition des auteurs de template ? et quel code HTML ?
Je pense que le maximum d'informations devrait etre accessible (sous la forme de {thumbnails.picture.*}), meme si bien sur les templates n'en utiliseraient que quelques uns ({thumbnails.picture.IMAGE_TITLE}, eventuellement {thumbnails.picture.NB_COMMENTS}, etc). Les styles en ligne que « mon » code impose pourraient se trouver dans {thumbnails.picture.CSS_POSITIONING}. PWG pourrait egalement fournir {thumbnails.picture.ID} (au cas où l'utilisateur prendrait le temps de styler une image en particulier) et {thumbnails.picture.CLASS} (qui vaudrait "image" ou "subcategory", encore qu'il faudrait verifier qu'il est possible de differencier les images des sous-categories uniquement par cet attribut de facon satisfaisante).

yoDan a écrit:

Je pense que le maximum d'informations devrait etre accessible (sous la forme de {thumbnails.picture.*}), meme si bien sur les templates n'en utiliseraient que quelques uns ({thumbnails.picture.IMAGE_TITLE}, eventuellement {thumbnails.picture.NB_COMMENTS}, etc). [...]/[...], encore qu'il faudrait verifier qu'il est possible de differencier les images des sous-categories uniquement par cet attribut de facon satisfaisante).

J'adhère complètement à ton point de vue.
C'est la meilleure façon pour que de si nombreux utilisateurs développent des thèmes et templates différents et de plus en plus élaborés.
C'est une clé complémentaire qu'il nous faut proposer en réponse au succès grandissant de PWG.

Proposer bien plus, et laisser toute liberté au webmaster d'en utiliser bien moins.

Bien le bonjour à toi yoDan, mais aussi à tous bien évidemment,

Objectif:

#floating_legends LI, #floating_legends SPAN {
  width: 200px;
}

#floating_legends SPAN {
  display: block;
  overflow: hidden;
}

#floating_legends SPAN.thumbnail {
  position: relative;
  height: 200px;
  background: transparent url(images/diapo-fond.png);
}

nickel, certes, mais pourquoi ne pas l'écrire comme ceci:

#floating_legends LI, #floating_legends SPAN {
  width: 200px;                                            /* Only once width for all thumbnails */
}

#floating_legends SPAN.thumbnail {
  height: 200px;                                          /* Only once height for all thumbnails, for a very simple adaptation */
  position: relative;
  background: transparent url(images/diapo-fond.png);
}

#floating_legends SPAN {
  display: block;
  overflow: hidden;
}

J'ai simplement rapproché, width et height.
En fait c'est juste, histoire de dire quelque chose, je mettrai volontiers ces deux définitions/parmétrages dans un fichier css séparé de façon à simplifier les corrections et adaptations.

Décidément, tes girafes étaient pourtant belles, mais Noël t'a réellement inspiré.
Laisse-nous un peu de temps pour digérer et revenir vers toi avec de plus concrêtes idées.
Merci bien. C'est un très beau cadeau en tout cas.
Vincent