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)