Bonjour à tous,
L'équipe a éprouvé le besoin de vous solliciter pour connaître ce que vous, webmasters en herbe ou experts, vous souhaitez avoir au niveau du script.
Dès que vos idées seront proches ou à l'opposé des notres, vous retrouverez face à nos opinions afin d'enrichir au maximum le débat d'idées.
Quelles sont les balises que vous souhaitez voir générer, lesquelles vous ne voulez pas?
Je vous donne ici quelques idées mais la liste est volontairement incomplète.
Quels moyens? Des formats indépendants lesquels sont adressés par l'attribut universel id= et ceci reporte les définitions vers les feuilles de style (css)?
Dans quel ordre devons générer: la balise <th> avant <ul> mais après <a> et enfin <img>?
Quelles séquences, toutes les n miniatures, il faudrait... ajouter ...., ne pas générer... ?
Quels noms d'id (avec un numéro ou sans, une option)?
Quels noms de class (idem avec un numéro ou sans numéro, une option)... ?
A quoi cela peut vous être plus utile ou moins utile?
Que doit on vous mettre a disposition dans les TPL? Un modèle épuré au maximum, c-à-d. le plus simple possible.
Les idées de customisation doivent être externe dans le wiki ou En commentaire dans les TPL ou les css?
Autrement dit ici, on ne parlera que du résultat des pages category.php uniquement.
Pensez en premier lieu à la page d'accueil!
Pensez aussi aux pages d'une catégorie particulière!
Donnez-nous votre avis sur la question / Merci d'avance à tous :
Qu'est-ce que nous devons générer en standard au niveau du script pour toute page de miniatures?
Bien entendu votre avis servira de base à nos conclusions et surtout à l'élaboration de ce qui sera sans doute la 1.6...
Avec l'aimable attention de z0rglub et de Chrisaga.
Hors ligne
Pour les plus anglophones d'entre vous, je vous conseille la lecture attentive du topic Improved HTML and layout dans lequel vous trouverez des suggestions, des contraintes techniques du point de vue de YoDan, chrisaga et moi un petit peu.
L'affichage des miniatures tel qu'il va être proposé en branche 1.5 est issu d'une longue recherche de la perfection. Reflexions, tests, tentatives, succès relatif. Si vous jetez un coup d'oeil au code HTML et CSS correspondant aux miniatures, vous risquez d'avoir un peu de mal. En tout cas, moi je n'y comprend plus rien, seuls chrisaga et YoDan semble maîtriser ce code. On pourrait se dire "simplifions le code", mais si le code est compliqué, c'est parce que nos contraintes sont nombreuses et fortes :
- les miniatures ont des tailles variables, en hauteur, en largeur.
- les miniatures ont du texte à afficher en légende. Cette légende a une longueur variable
- on ne souhaite pas utiliser de tableau HTML pour les raisons suivantes: éviter l'utilisation non sémantique des balises, que le nombre de miniatures par ligne s'adapte automatiquement à la largeur de l'écran du visiteur
Dans le topic en anglais proposé précédemment, j'y fais mention de la disposition de l'application "Original", qu'on peut voir par exemple sur une galerie de l'auteur de l'application. Pour moi, cette disposition est vraiment nickelle, le résultat est très classe. Sauf que les contraintes ne sont pas les mêmes que pour PhpWebGallery, les miniatures ont des tailles fixes et il n'y a pas de légende. Pour améliorer encore, je pense que le top, ce serait que les miniatures soient carrées. Je fais des tests en local en ce moment et le résultat est esthétiquement plaisant.
Les miniatures peuvent représenter des photos ou bien des sous-catégories. Aujourd'hui, la seule façon de les distinguer, c'est la présence obligatoire du nom de la sous-catégorie entre crochets [ma sous-catégorie] en légende des miniatures pointant vers une sous-catégorie.
J'en viens à une proposition pour faire évoluer la présentation des miniatures (en 1.6 ?) :
- les miniatures représentant des photos sont représentées à la manière d'Original, en considérant une taille fixe et sans légende. Cela a été évoqué récemment dans le topic Ajout nombre de visites sous les thumbnails. Les légendes sont placées en infobulles.
- les miniatures représentant des sous-catégories sont affichées complètement différemment, une miniature par ligne et la description de la catégorie à côté de la miniature. A la manière de Menalto Gallery.
Cette proposition permettrait de simplifier énormément le code HTML/CSS et donc sa maintenance et sa compatibilité avec les différents navigateurs. Actuellement, le code CSS est bourré de hacks pour être compatible avec Firefox, Opéra, IE et autre Konqueror/Safari. Avec cette proposition, le code HTML se résume à
<div id="thumbnails"> <a href="thumbnail/1.jpg"><img src="1.jpg"></a> <a href="thumbnail/2.jpg"><img src="2.jpg"></a> <a href="thumbnail/3.jpg"><img src="3.jpg"></a> </div>
Hors ligne
Voir le message de Reflex sur [Catégories] Pour un meilleur classement / affichage
Est-ce ou n'est-ce pas en offrant ce genre de possibilité que PWG se démarquerait immédiatement le plus?
Je m'explique si dans les tables #_category ou #_picture, on ajoute un champ CCS_class par défaut à None.
Si on ajoute une Option du genre $conf['CSS_class_indent'] = true; cela pourrait offrir la possibilité de générer:
Sur les vignettes par exemple:
<div id="thumbnails">
<a href="thumbnail/1.jpg"><img class="prov_genre_1" src="1.jpg"></a>
<a href="thumbnail/2.jpg"><img class="prov_genre_2" src="2.jpg"></a>
<a href="thumbnail/3.jpg"><img class="prov_genre_3" src="3.jpg"></a>
</div>
Il en va de même sur les noms des catégories
<a class="prov_1" href="./category.php?cat=14">Provenance géographique</a> /
<a class="genre_1" href="./category.php?cat=19">Genre....
(remarque : l'indent ne marche pas car les categories sont différentes.).
Ce qui répond le mieux à la problématique de Reflex,
et inscrit notre galerie préférée comme un support idéal d'un certain nombre de scientifiques.
Dès lors, tirez de vous même les conclusions.
Bien entendu, par défaut $conf['CSS_class_indent'] = false;
et si CSS_class est à None le paramètre class= ne sera pas généré (on peut aussi imaginer une valeur par défaut en option).
Si, défaut $conf['CSS_class_indent'] = false;
et CSS_class est égal à "cat" pour les catégories et à None pour les photos on pourrait obtenir:
<div id="thumbnails">
<a href="thumbnail/1.jpg"><img class="cat" src="1.jpg"></a>
<a href="thumbnail/2.jpg"><img class="cat" src="2.jpg"></a>
<a href="thumbnail/3.jpg"><img class="cat" src="3.jpg"></a>
</div>
et
<a class="cat" href="./category.php?cat=14">Provenance géographique</a> /
<a class="cat" href="./category.php?cat=19">Genre....
On peut imaginer que la photo #2 aie besoin d'une classe particulière (déjà prévue dans le local_class.css par exemple).
On obtiendrait alors:
<div id="thumbnails">
<a href="thumbnail/1.jpg"><img class="cat" src="1.jpg"></a>
<a href="thumbnail/2.jpg"><img class="cat_revers" src="2.jpg"></a>
<a href="thumbnail/3.jpg"><img class="cat" src="3.jpg"></a>
</div>
Tout est possible mais faut-il encore savoir ce que l'on veut... sans doute.
Votre avis...?
Hors ligne
from zOrglub
J'en viens à une proposition pour faire évoluer la présentation des miniatures (en 1.6 ?)
- les miniatures représentant des photos sont représentées à la manière d'Original, en considérant une taille fixe et sans légende.Les légendes sont placées en infobulles.
- une taille fixe oui, mais parametrable.... ? je suppose, d'une façon ou d'une autre (ex : 130px pour moi).
- par défaut ou aprés paramétrage admin, affichage du nom de fichier de la miniature et (nouveau) du titre de celle-ci en dessous. La légende pouvant être longue, il peut être intéressant de mettre un titre court. Cela facilitera la visite.
- les miniatures représentant des sous-catégories sont affichées complètement différemment, une miniature par ligne et la description de la catégorie à côté de la miniature.
tres bonne idée, de nombreux visiteurs ont du mal à saisir la différence entre les miniatures représentant des catégories et celles représentnat les photos.
merci.
eric.
Hors ligne
- les miniatures représentant des sous-catégories sont affichées complètement différemment, une miniature par ligne et la description de la catégorie à côté de la miniature.
Excellente idée.
Par contre je suis beaucoup plus réservé sur les "info bulles"
Hors ligne
Avant de donner mon avis, je dois preciser que je me satisferais tout à fait d'une gallerie de photos, sans méta-données, sans catégories virtuelles et autre système multi-utilisateur. Utilisateur simpliste, donc. Ceci explique en partie la suite...
Je pense que la page des diapositives ne devrait contenir que les miniatures, et éventuellement quelques icones, mais pas de texte. Le texte complique la mise en page (sa taille est arbitraire) et distrait l'utilisateur, même du texte immobile.
Pour les infos-bulles, comme Tcherno, je suis très réservé. De façon générale, je ne les aime pas : si je veux l'information qu'elles contiennent, je trouve qu'elles mettent trop de temps à s'afficher et il est gênant de n'avoir l'info que pour un élément à la fois. Mais la plupart du temps je ne veux pas l'info qu'elles contiennent, et avoir constamment une bulle qui apparaît dès que l'on arrête la souris est énervant. J'en reviens à mon précédent paragraphe : les informations qu'elles pourraient contenir ont naturellement leur place à la page "picture", et pas (AMHA) a la page "category".
Je reprends le code proposé plus haut et j'y ajoute une « info-bulle » (!), mais à mon avis plus conforme à l'esprit de la norme HTML (pour ce que j'en ai compris). Cela donne :
<ul id="thumbnails"> <li><a href="1.jpg" title="$titre"><img src="thumbnail/1.jpg" alt="miniature" title="Miniature de $titre"></a> <li><a href="2.jpg" title="$titre"><img src="thumbnail/2.jpg" alt="miniature" title="Miniature de $titre"></a> <li><a href="3.jpg" title="$titre"><img src="thumbnail/3.jpg" alt="miniature" title="Miniature de $titre"></a> </ul>
où $titre est le titre de l'image si le propriétaire de la gallerie lui en a donné un, ou le nom du fichier sinon.
Notez au passage le retour de l'élément UL ;-)
On *pourrait* envisager des icones pour indiquer qu'une image est récente, ou est bien notée, ou a reçu récemment un commentaire, ou que sais-je. Pour cela, je verrais éventuellement une icône dans un coin de la miniature. Les miniatures seraient dimensionnées de façon à laisser toujours un coin de 16px par 16px libre (ce n'est gênant que pour les photos carrées). Mais à nouveau, je ne suis pas sûr qu'il y ait une quelconque info à rajouter que la miniature elle-même (il y a toujours les pages "spéciales" pour avoir les photos les mieux notées, les plus visitées, etc).
Je finis en votant aussi pour mieux différencier les miniatures représentant une image de celles représentant des sous-catégories.
Hors ligne
Bonjour yoDan,
C'est un grand retour sur le forum...
yoDan a écrit:
Le texte complique la mise en page (sa taille est arbitraire) et distrait l'utilisateur, même du texte immobile.
Tout à fait d'accord avec toi.
yoDan a écrit:
Pour les infos-bulles, comme Tcherno, je suis très réservé. De façon générale, je ne les aime pas : si je veux l'information qu'elles contiennent, je trouve qu'elles mettent trop de temps à s'afficher et il est gênant de n'avoir l'info que pour un élément à la fois. Mais la plupart du temps je ne veux pas l'info qu'elles contiennent, et avoir constamment une bulle qui apparaît dès que l'on arrête la souris est énervant. J'en reviens à mon précédent paragraphe : les informations qu'elles pourraient contenir ont naturellement leur place à la page "picture", et pas (AMHA) a la page "category".
Les info-bulles devraient être en option (Configuration locale), non?
yoDan a écrit:
Code:
<li><a href="1.jpg" title="$titre"><img src="thumbnail/1.jpg" alt="miniature" title="Miniature de $titre"></a>où $titre est le titre de l'image si le propriétaire de la gallerie lui en a donné un, ou le nom du fichier sinon.
Je ne suis pas d'accord sur le title de la balise "img" il n'apporte rien et est toujours masqué par le title de la balise "a".
De plus ne devrait-on pas générer <li/> au lieu de <li>?
yoDan a écrit:
On *pourrait* envisager des icones pour indiquer qu'une image est récente, ou est bien notée, ou a reçu récemment un commentaire, ou que sais-je. Pour cela, je verrais éventuellement une icône dans un coin de la miniature. Les miniatures seraient dimensionnées de façon à laisser toujours un coin de 16px par 16px libre (ce n'est gênant que pour les photos carrées). Mais à nouveau, je ne suis pas sûr qu'il y ait une quelconque info à rajouter que la miniature elle-même (il y a toujours les pages "spéciales" pour avoir les photos les mieux notées, les plus visitées, etc).
L'uniformité a du bon, mais la diversité aussi.
Des vignettes de même taille avec les mêmes bordures, ce n'est pas comme ça que l'on présente les oeuvres dans les grands musées.
Une photo peut nuire à la qualité de sa voisine, l'oeil le voit pas la machine.
Ne faut-il pas selon toi proposer l'uniformité et sur option la diversité? Je veux que les vignettes des panoramiques soient identifiables immédiatement des autres. Je partage des PNG et certaines images sont ovales (fond transparent). etc...
D'où le paramètre class de la balise img géré par PWG?
A très bientôt le plaisir de relire tes opinions.
Hors ligne
Pour information la version 1.5.0 génère:
<ul class="thumbnails"> <li> <span> <span><span class="wrap"> <a href="./category.php?cat=1"> <img class="thumbnail" src="./galleries/realcat1/TN-thumb.jpg" alt="Category1name" title="shows images at the root of this categry"> </a> </span></span> [Category1name] <img title="Image within the 7 days" src="./template/yoga-dark/theme/recent.png" style="border:0;height:14px;width:16px" alt="" /> </span> </li> <li> <span> <span><span class="wrap"> <a href="./category.php?cat=8"> <img class="thumbnail" src="./galleries/realcat8/TN-thumb.jpg" alt="Category1name" title="-//:---\spam les images à la racine de cette catégorie"> </a> </span></span> [Category2name] <img title="Image de moins de 7 jours" src="./template/yoga-dark/theme/recent.png" style="border:0;height:14px;width:16px" alt="" /> </span> </li> </ul>
J'ai mis un généré en anglais et un en français.
Et la première question qui vient à l'esprit en lisant ceci est:
<span>
<span><span class="wrap">
Est-ce qu'il est normal de générer ces balises?
1 - On notera au passage le retour de l'élément UL (Cf. yoDan)
2 - [Au passage]On est loin, très loin, de la syntaxe évoquée par yoDan...[/Au passage]
3 - [Au passage toujours,] il manque un "o" dans "categry" ("title="shows images at the root of this categry") [/Au passage toujours,]
4 - [Au passage encore,] que "Image within the 7 days" ne demande pas "the" en anglais, il me semble.[/Au passage encore,]
8;-)
Je passe mon tour...
Hors ligne
Quelques remarques en passant a mon tour ;-)
VDigital, a propos de mon extrait de code, a écrit:
Je ne suis pas d'accord sur le title de la balise "img" il n'apporte rien
Absolument, je me suis emmele les pinceaux. Voici une nouvelle tentative :
<li><a href="1.jpg" title="$titre"><img src="thumbnail/1.jpg" alt="Miniature de $titre"></a>
L'image n'a pas besoin de titre, en revanche c'est son texte "alt" qui doit etre complet.
Le code est encore simple, mais c'est juste qu'il est encore assez "theorique". Il faudra peut-etre l'envelopper dans un span pour l'afficher comme on veut. Et sans doute un autre span si l'on decidait de (re)mettre du texte sous l'image. Ajoutons a cela les differences de rendu entre navigateurs, et hop, on se retrouve avec trois (horribles ?) span imbriques. Mais ce n'est pas si grave, et pour le moment on devrait juste essayer de savoir ce que l'on veut.
Il y a peut-etre deux types d'utilisateurs, dont les attentes seraient suffisamment differentes pour necessiter deux templates :
- 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
- l'utilisation "prof de Sciences Nat", ou au contraire le proprietaire de la gallerie a fait un travail d'organisation, de nommage des photos, ou laisser un message n'est pas autorise et ou le nombre de visites importe peu. Pour cette utilisation, prevoir un template qui affiche le titre peut valoir le coup.
On n'est pas oblige de fournir un template pour tous les types d'utilisation, loin de la, mais les identifier permet de decider de ne pas courrir tous les lievres a la fois.
A part ca, rapidement :
- j'ecrirais plutot "Image from the last 7 days" ou "Image less than 7-day-old"
- je ne pense pas avoir compris:
VDigital a écrit:
L'uniformité a du bon, mais la diversité aussi.
Des vignettes de même taille avec les mêmes bordures, ce n'est pas comme ça que l'on présente les oeuvres dans les grands musées.
Une photo peut nuire à la qualité de sa voisine, l'oeil le voit pas la machine.
Ne faut-il pas selon toi proposer l'uniformité et sur option la diversité? Je veux que les vignettes des panoramiques soient identifiables immédiatement des autres. Je partage des PNG et certaines images sont ovales (fond transparent). etc...
D'où le paramètre class de la balise img géré par PWG?
Tu envisages d'avoir autres choses que des carres dans "category" ? (pour l'instant, ce sont des carres)
Hors ligne
yoDan a écrit:
Le texte complique la mise en page (sa taille est arbitraire) et distrait l'utilisateur, même du texte immobile.
Dans l'absolu cela est juste.
Je me permet tout de même d'intervenir pour défendre la présence du nom du fichier et du titre de la photo sous la vignette.
J'appartiens à la catégorie d'utilisateur de PWG pour qui cela est indispensable.
Mes photos sont issues de reportages sportifs ou institutionnels.
Mes visiteurs ont besoin de voir vite toutes les photos (donc les vignettes) . Ils doivent aussi y trouver une légende minimum (donc le titre).
Ceux qui souhaitent plus d'infos sur une photo vont ensuite trouver celles-ci sur la page de l'image en taille moyenne.
Je pense donc que doivent demeurer titre et nom de fichier sous la vignette. Charge à moi de faire un titre court bien sur.
(les infos bulles, c'est délicat, il faut bien définir ou s'affichera la bulle. Mais d'y avoir le champ légende pourrait être trés bien !!)
en résumé :
pourquoi n'y aurait-il pas une option admin (voir user) qui ferait s'afficher ou non ces infos sur les pages des vignettes. ??
Hors ligne
Attention, il me semble inenvisageable de ne plus pouvoir afficher de légende à une miniature. Cela constituerait une régression fonctionnelle. Ce que nous cherchons ici, ce sont des alternatives pour améliorer et contourner les limitations de la mise en page actuelle.
Hors ligne
yoDan a écrit:
"Image from the last 7 days" ou "Image less than 7-day-old"
Last one gave me a better idea why not "Picture less than 7 days old" ?
yoDan a écrit:
- je ne pense pas avoir compris:
VDigital a écrit:
L'uniformité a du bon, mais la diversité aussi.
[...]Tu envisages d'avoir autres choses que des carres dans "category" ? (pour l'instant, ce sont des carres)
Yes...!
Et c'est pourquoi, je milite pour la présence d'un paramètre CLASS dans la balise IMG, paramètre à gérer dans la table #_category.
Une class dira background-color: white, une autre #cccccc, etc.
Et cela est interessant aussi pour border, width, etc.
Hors ligne
VDigital, je comprends les possibilités offertes par une class CSS différente pour chaque miniatures. Mais comment déterminer la classe associée à chaque miniature. Il y a tout un tas de possibilités, mais je voudrais ton avis.
Hors ligne
Dans l'édition d'une catégorie tu prévois un champ Class CSS qui a sa default value en config.
La personne veut que la catégorie "machin" soit avec la tête dans le... elle ajoute la class dans son css.
Champ non controlé, bien sûr.
Hors ligne
Voici de nouvelles pages de test. J'espere que vous les aimerez.
Ma reflexion sur le cahier des charges :
- il faut trouver un moyen d'afficher une legende sous l'image, quitte a ne pas gerer les legendes de longueur arbitraire, et quitte a avoir, pour ceux qui veulent, un template different (et plus simple) ne s'embarrassant pas de legendes. Donc je propose a chaque fois un template avec et sans legende, et je limite la legende a deux lignes.
- ce n'est pas beaucoup plus complique (dans ce code-la) de gerer des miniatures plus allongees, et je le prouve :)
- les "proprietes" supplementaires de l'image (populaire, recente, commentee, etc) sont indiquees par des icones
Et a propos de la mise en oeuvre :
- c'est un probleme tres difficile si l'on reste en aveugle complet (code CSS independant du contenu, en particulier de la taille des images)
- un code donnant un resultat "parfait" mais uniquement comprehensible par l'equipe de PWG n'est pas si parfait. En fait, c'est carrement problematique
- 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.
- dans la meme veine, j'ai prefere faire "floater" les images, plutot que d'utiliser des inline-blocks, meme si maintenant que je leur ai imposé une hauteur fixe, on pourrait y songer a nouveau...
Miniatures dans des carrés, pas de légende
Cas de base : miniatures dans des carrés, avec une légende
Fun : les miniatures peuvent etre panoramiques, pas de légende
Miniatures panoramiques avec légende
Quelques remarques pour finir :
- les icones (image populaire, recente, ...) sont des images de fond (!). Cela complique leur gestion (combinaison d'icones, placement pour les "gallerie_rectangles*", voir le code des pages ci-dessus), mais simplifie grandement le code HTML (et pour cause : elles n'apparaissent plus). A discuter.
- j'ai volé l'effet de survol (ou le cadre de la miniature s'eclaircit et s'epaissit) a la page donnee par z0rglub
- Pas de problemes pour les navigateurs conformes, IE a du mal avec l'effet de survol pour les pages avec legende. Il faudrait voir si un code CSS modifié lui conviendrait mieux, ou s'il faut un chouia de javascript.
- tres peu de hacks CSS (un seul et d'une ligne pour le cas "carres_avec_legende", un autre de deux lignes pour gerer les miniatures panoramiques)
Hors ligne