Bonjour à tous
Le site osirisnetnet, consacré à l'égyptologie, est géré de la façon suivante :
Le propriétaire du site rédige des articles sous forme de html rudimentaire comprenant des "snippets" (fractions de code préenregistrées) qu'il appelle depuis son éditeur de pages html.
Ce site contient de très nombreuses images qui parsèment le texte des pages, dans des blocs dits "diapo" qui contiennent soit une image seule, soit une image avec un commentaire en français et un commentaire en anglais, un seul des deux étant visible selon la version de la page.
Tout cela fonctionne grâce à des scripts JavaScript que je lui ai fournis, qui font souvent des modifications du DOM, ainsi que des directives CSS appropriées.
Un point important dans ces pages est le "groupe d'images", que nous appelons "cluster"
Le propriétaire définit un cluster par la séquence suivante:
ce qui dans un premier temps va générer une structure :
Au chargement de la page se déroule un script assez complexe qui effectue les opérations suivantes :
- regrouper les diapos par ligne en fonction d'un paramètre fourni dans l'appel du script diapo() qui permet de savoir quand l'auteur décide d'aller à la ligne, par exemple on peut avoir une ligne de 2 diapos suivie d'une ligne de 3 diapos en donnant le paramètre "break" dans l'appel de la 3ème diapo
- pour chaque ligne, reconnaître l'image la moins haute et faire en sorte que toutes les images d'une ligne de diapos aient la même hauteur
- en fonction de la largeur disponible pour la ligne calculer la largeur de chaque image pour remplir la ligne
- pour les <figcaption> elles sont calculées de telle sorte que leur largeur soit au plus celle de l'image correspondante et que les <figure class="diapo"> aient toutes la même hauteur.
Pour rendre cela responsive, le script est déroulé à la fois au chargement de la page et au changement de taille de la fenêtre du navigateur, par exemple quand on change l'orientation de l'écran.
Tout cela est lourd et complexe, mais à l'époque, après avoir consulté les experts sur ce forum, je n'ai pas trouvé de solution simple à base de CSS.
Le calme (relatif) de l'été est une opportunité de chercher si une solution à base de CSS ne serait pas envisageable, au moins pour éviter un recalcul au changement d'orientation.
Sur un domaine voisin j'ai posé une question qui m'a permis de réaliser une solution que je juge satisfaisante (mais que je n'ai pas encore mise en ligne).
C'est pourquoi je me permets de vous demander si vous auriez une voie de solution, avec les contraintes suivantes :
- ne pas demander à l'auteur des pages de changer ses méthodes de travail : il est expert en égyptologie, il a acquis depuis 20 ans une certaine aptitude à manier du HTML basique, on ne peut pas lui en demander plus
- les utilisateurs clés de ce site sont également des égyptologues, ils ont parfois des PC vieillissants et ils ne mettent pas systématiquement à jour leurs navigateurs; il est donc nécessaire que cela tourne sur des versions de navigateurs ayant 3 ou 4 ans . Nous avons précisé aux utilisateurs que ça pouvait ne pas fonctionner sur IE, néanmoins je pense que ça doit tourner (éventuellement moins bien) sous IE11.
- il y a quelques années j'ai développé des outils qui m'ont permis de modifier la structure des 1000+ pages existantes (à base de <table> imbriquées); je ne peux pas me permettre de faire une telle opération une nouvelle fois, d'autant que la solution actuelle, techniquement insatisfaisante, est acceptée par le propriétaire et les utilisateurs du site
- je peux par contre modifier le DOM par JavaScript. Par exemple une solution qui nécessiterait de "casser" les <figure class="diapo"> en un élément image et un élément texte serait acceptable.
Merci pour vos suggestions.
Modifié par PapyJP (15 Aug 2022 - 20:01)
Le site osirisnetnet, consacré à l'égyptologie, est géré de la façon suivante :
Le propriétaire du site rédige des articles sous forme de html rudimentaire comprenant des "snippets" (fractions de code préenregistrées) qu'il appelle depuis son éditeur de pages html.
Ce site contient de très nombreuses images qui parsèment le texte des pages, dans des blocs dits "diapo" qui contiennent soit une image seule, soit une image avec un commentaire en français et un commentaire en anglais, un seul des deux étant visible selon la version de la page.
Tout cela fonctionne grâce à des scripts JavaScript que je lui ai fournis, qui font souvent des modifications du DOM, ainsi que des directives CSS appropriées.
Un point important dans ces pages est le "groupe d'images", que nous appelons "cluster"
Le propriétaire définit un cluster par la séquence suivante:
<figure class="cluster">
<script>diapo(...)</script>
<script>diapo(...)</script>
<script>diapo(...)</script>
....
</figure>
ce qui dans un premier temps va générer une structure :
<figure class="cluster">
<figure class="diapo"><img ...><figcaption>....</figcaption>
<figure class="diapo"><img ...><figcaption>....</figcaption>
<figure class="diapo"><img ...><figcaption>....</figcaption>
....
</figure>
Au chargement de la page se déroule un script assez complexe qui effectue les opérations suivantes :
- regrouper les diapos par ligne en fonction d'un paramètre fourni dans l'appel du script diapo() qui permet de savoir quand l'auteur décide d'aller à la ligne, par exemple on peut avoir une ligne de 2 diapos suivie d'une ligne de 3 diapos en donnant le paramètre "break" dans l'appel de la 3ème diapo
- pour chaque ligne, reconnaître l'image la moins haute et faire en sorte que toutes les images d'une ligne de diapos aient la même hauteur
- en fonction de la largeur disponible pour la ligne calculer la largeur de chaque image pour remplir la ligne
- pour les <figcaption> elles sont calculées de telle sorte que leur largeur soit au plus celle de l'image correspondante et que les <figure class="diapo"> aient toutes la même hauteur.
Pour rendre cela responsive, le script est déroulé à la fois au chargement de la page et au changement de taille de la fenêtre du navigateur, par exemple quand on change l'orientation de l'écran.
Tout cela est lourd et complexe, mais à l'époque, après avoir consulté les experts sur ce forum, je n'ai pas trouvé de solution simple à base de CSS.
Le calme (relatif) de l'été est une opportunité de chercher si une solution à base de CSS ne serait pas envisageable, au moins pour éviter un recalcul au changement d'orientation.
Sur un domaine voisin j'ai posé une question qui m'a permis de réaliser une solution que je juge satisfaisante (mais que je n'ai pas encore mise en ligne).
C'est pourquoi je me permets de vous demander si vous auriez une voie de solution, avec les contraintes suivantes :
- ne pas demander à l'auteur des pages de changer ses méthodes de travail : il est expert en égyptologie, il a acquis depuis 20 ans une certaine aptitude à manier du HTML basique, on ne peut pas lui en demander plus
- les utilisateurs clés de ce site sont également des égyptologues, ils ont parfois des PC vieillissants et ils ne mettent pas systématiquement à jour leurs navigateurs; il est donc nécessaire que cela tourne sur des versions de navigateurs ayant 3 ou 4 ans . Nous avons précisé aux utilisateurs que ça pouvait ne pas fonctionner sur IE, néanmoins je pense que ça doit tourner (éventuellement moins bien) sous IE11.
- il y a quelques années j'ai développé des outils qui m'ont permis de modifier la structure des 1000+ pages existantes (à base de <table> imbriquées); je ne peux pas me permettre de faire une telle opération une nouvelle fois, d'autant que la solution actuelle, techniquement insatisfaisante, est acceptée par le propriétaire et les utilisateurs du site
- je peux par contre modifier le DOM par JavaScript. Par exemple une solution qui nécessiterait de "casser" les <figure class="diapo"> en un élément image et un élément texte serait acceptable.
Merci pour vos suggestions.
Modifié par PapyJP (15 Aug 2022 - 20:01)