BoyWiki:Agora/3 janvier 2013

Agora/3 janvier 2013

Recherche d'une présentation de galerie

Sur la page Albert Anker (galerie), j'ai fait trois tentatives de mise en page d'une galerie d'images. Chacune a ses défauts : manifestement la meilleure solution reste à trouver.

Je n'ai pas repris la même présentation que, par exemple, dans Claude Joseph Bail (galerie), où il y avait 28 images seulement (ce qui est déjà beaucoup). Celle d'Anker devrait atteindre ou même dépasser les 60 images : il faut donc de plus petites images, rangées par lignes de 3 ou 4, et non plus de 2 seulement.

Le premier essai (tableau) est le plus facile. Inconvénients :

• la largeur des images reste toujours à peu près la même, limitée par la taille des cellules
• en cas d'affichage haute définition, il y a de grands vides entre les images (pas esthétique)

Le deuxième essai (tableau + modèle Image relative) donne un tableau systématiquement trop large, même en haute définition.

Le troisième essai (modèle Image relative seul) est le plus souple, mais il est presque impossible de faire tenir trois images sur une même ligne : celle de droite est décalée vers le bas, sans doute gênée par celle du centre. Quant à en aligner 4, ça semble complètement impossible, puisque les seuls paramètres de position sont "gauche", "centre" et "droite".

Peut-être n'ai-je pas su mettre les bons paramètres...

N'a-t-on jamais trouvé un système pour aligner simplement des images les unes à la suite des autres, comme on met des mots dans un texte, en laissant le logiciel décider de l'endroit où il faut passer à la ligne suivante ?

Pour ce soir je laisse les choses telles quelles, ne sachant trop comment améliorer les choses. Pinocchio, si tu as des idées, n'hésite pas à faire de nouveaux essais, même si ça chamboule tout : cette page n'est qu'une ébauche très provisoire.

Caprineus 4 janvier 2013 à 00:12 (GMT)

J'ai retiré les tableaux qui troublaient la largeur de page et faisaient apparaitre des ascenseurs.

Mais si ! Nativement pour html, les images sont considérées comme du texte, par exemple :

Une image et une autre et encore une ...

Mais ce n'est plus aussi simple si on veut placer l'image dans un cadre de taille variable, y ajouter un titre, un commentaire, un lien vers l'image originale...

Le positionnement des flottants (c'est le cas de {{image relative}}) est parfois d'humeur primesautière quand ils sont nombreux ! Le {{clr}} n'est pas indispensable après chaque rangée, il permet d'arrêter l'effet flottant et de repartir sur une ligne horizontale : un seul est nécessaire, celui placé tout à la fin des images. On peut en insérer d'autres pour figer une organisation. L'option droite ou gauche doit être vue comme le sens d'empilement des images les unes après les autres, et non comme un ordre de répartition dans la page dès lors que les images sont placées cote à cote. En particulier l'option centre ne doit pas être utilisée dans ce cas. La première image à gauche va le long de la marge ; la seconde toujours à gauche vient se placer le long de la première, et ainsi de suite tant qu'il reste de la place sur la même rangée. Il peut être intéressant de ranger les images par ordre de hauteur, ainsi le rang suivant s'imbrique mieux sous le précédent. Pour casser l'effet empilement vertical il peut être utile de changer l'ordre gauche ou droite d'un rang à l'autre.

Reste le problème du poids et du temps de chargement de la page qui ne sont pas négligeables.

Pinocchio 4 janvier 2013 à 16:00 (GMT)

Bon, je comprends mieux, merci de ces explications. Il n'empêche que la logique informatique n'est pas toujours compatible avec la logique humaine — sans doute parce que nous sommes plus pragmatiques que des logiciels, c'est ce qui nous induit souvent en "erreur".

L'idée d'occuper au maximum l'espace de la page, comme des tableaux qui couvriraient entièrement un mur, est un choix intéressant, bien que peu courant en France (et inimaginable au Japon...). Je me rappelle avoir été frappé d'une telle disposition lors d'une lointaine visite en Italie — peut-être ont-ils tant d'oeuvres d'art là-bas qu'ils ne savent plus où les mettre !

Le poids est un problème aujourd'hui, mais ne le sera plus demain. Dire qu'il y a dix ans à peine j'étais tout content d'avoir du 56K ! Idem pour le temps, qui malgré tout n'est pas si long que ça : même à travers TOR les pages s'affichent assez vite. Et puis, rester parfois quelques secondes supplémentaires devant une oeuvre d'art, en attendant que la suivante se charge, ça apprend la patience, voire la contemplation...

Caprineus 4 janvier 2013 à 22:58 (GMT)

Bien sûr ce n'est qu'une façon de ranger qui a pour moi l'avantage de casser les alignements. Pour recréer des alignements horizontaux il suffit de remettre les {{clr}} entre chaque rang. Mais pour des alignements verticaux c'est plus difficile. Sinon il existe un outil souvent appelé visionneuse sur de nombreux sites, qui n'affiche qu'une image en grand à la fois et toutes les autres en miniatures que l'on peut faire défiler. L'inconvénient est qu'il nécessite du code pour fonctionner.

Pinocchio 5 janvier 2013 à 08:09 (GMT)

Il est sans doute bon de varier les modes de présentation, ça fait partie de l'animation d'un site. La disposition que tu suggères a en effet l'intérêt de rompre la monotonie des alignements.

Qu'entends-tu par « L'inconvénient est qu'il nécessite du code pour fonctionner » ? Risque de piratage du code et de modification par un malveillant ? (Certains prennent peur et évoquent cette possibilité dès qu'il y a du javascript ; mais n'étant pas spécialiste, je n'ai jamais su s'il s'agissait d'un vrai risque...)

Caprineus 5 janvier 2013 à 14:25 (GMT)

Le principal inconvénient est que les utilisateurs qui ont désactivé dans leur navigateur l'utilisation des scripts, ne voient rien. Si c'est acceptable, à mon avis, pour des options de présentation ou des gadgets, ça l'est moins pour des contenus. Pinocchio 6 janvier 2013 à 23:40 (GMT)

Une galerie sans script à tester :

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

Oui, cette galerie est intéressante et d'utilisation très intuitive. Reste à déterminer dans quels cas elle est préférable à d'autres sortes de présentation.

A mon goût, il serait peut-être plus esthétique de supprimer le fond gris (le mettre en blanc ou transparent ?).

Est-il possible d'insérer du texte pour chaque image ? (titre, auteur, date, lieu, etc.)

Une possibilité de présentation verticale serait bienvenue. Mais si ça ne peut pas se faire dans le modèle, on pourra toujours empiler des modèles comme ça :

{{Image galerie|ANKER Albert 1858 Der Pfeifenschnitzer 1184x1575.jpg}}
{{Image galerie|ANKER Albert 1861 Sonntagnachmittag (Detail) 612x522.jpg}}
{{Image galerie|ANKER Albert 1858 Der Pfeifenschnitzer 1184x1575.jpg}}

à condition d'avoir un paramètre permettant d'afficher l'image à droite de la miniature. J'imagine par exemple un tableau énumérant les œuvres avec leurs caractéristiques, un peu comme celui-ci.

Caprineus 8 janvier 2013 à 12:54 (GMT)

Je viens de tester la galerie dans une fenêtre étroite, qui donne une idée de ce que serait une suite d'une vingtaine d'œuvres. Là, pour le coup, ce n'est pas très intuitif, ni commode : les miniatures s'affichent sur deux lignes, et il faut aller chercher la deuxième en utilisant un ascenseur.

S'il n'est pas possible de faire défiler la galerie sur une seule ligne sans utiliser de script, il vaudrait sans doute mieux afficher d'emblée les deux lignes de miniatures, sans ascenseur donc.

Caprineus 8 janvier 2013 à 13:07 (GMT)

Insérer du texte me semble difficile, peut-être possible par dessus l'image ?

Le nombre de rangées de miniatures dépend de leur quantité et de leur tailles. Une option a été ajoutée pour agrandir la hauteur de fenêtre des miniatures.

Une présentation verticale comparable est possible mais avec un nouveau modèle, le nombre des paramètres à modifier est trop grand pour une simple option. Mais ce modèle n'est pas adapté à l'insertion dans un tableau. Pour une présentation en forme de tableau tu peux utiliser des miniatures ordinaires (statiques) et utiliser le modèle {{Image lien}} sur le titre par exemple, pour faire apparaitre une version plus large de la même image. Pinocchio 8 janvier 2013 à 18:20 (GMT)

Un brouillon de ton tableau avec liens "surgissants" :

Bild	Titel	Jahr	Grösse/Material	Eigentümer/Sammlung
	Die Knöchelspieler	1864	Oel auf Leinwand
	Mädchen die Hühner fütternd	1865	66 x 51 cm Öl auf Leinwand	Musée d' art et histoire, Neuchâtel
	Die Bauern und die Zeitung	1867	64 x 80,5 cm Öl auf Leinwand	Privatbesitz

J'aime bien ces grandes images qui surgissent avec une apparence de léger relief. Le seul inconvénient, c'est qu'elles apparaissent quand on passe sur le nom de l'œuvre, et non sur la miniature. C'est gênant pour deux raisons :

• intuitivement on dirige plutôt le curseur vers les miniatures pour en augmenter l'image — l'utilisateur est donc pris à contrepied par ce nouveau fonctionnement ;
• surtout, de nombreuses œuvres auront une page dédiée, et un tel tableau est particulièrement opportun pour rediriger le lecteur vers ces pages — ce qui n'est plus possible si le lien appelle l'image.

Mais à part ça l'idée générale est très séduisante...

Caprineus 8 janvier 2013 à 22:10 (GMT)

Un autre test : Pinocchio 9 janvier 2013 à 17:10 (GMT)

Bild	Titel	Jahr	Grösse/Material	Eigentümer/Sammlung
	Die Knöchelspieler	1864	Oel auf Leinwand
	Mädchen die Hühner fütternd	1865	66 x 51 cm Öl auf Leinwand	Musée d' art et histoire, Neuchâtel
	Die Bauern und die Zeitung	1867	64 x 80,5 cm Öl auf Leinwand	Privatbesitz

Ah oui ! Voilà une présentation qui est vraiment adaptée pour présenter toute l'œuvre d'un artiste. C'est clair, pratique et esthétique. On va voir ce que ça donne pour Albert Anker...

Un point intéressant est qu'on peut moduler le zoom en fonction des images, plus ou moins intéressantes, et aussi plus ou moins nombreuses — pour Anker, par exemple, le nombre d'œuvres approchant la centaine, il vaudra peut-être mieux diminuer l'ensemble des zooms.

Histoire que je comprenne un peu ce que je fais : que veulent dire (et à quoi servent) les codes « prettytable », « sortable », « wikitable », « unsortable », « width="110px" », « width="175px" » ?

Le paramètre de taille d'une image doit-il être |400px ou |x400px (tu as utilisé les deux) ? Je suppose qu'il s'agit de la hauteur.

Un petit perfectionnement qui serait bienvenu, s'il est possible : empêcher l'image zoomée de sortir de la fenêtre. (S'il faut un script, ça peut quand même être acceptable, puisqu'il s'agit simplement d'un confort de visionnage.)

Caprineus 9 janvier 2013 à 21:53 (GMT)