[XML/DTD/XSL/CSS/HTM] Exemple affichage d'images (tutorial)
bubuze
Messages postés31Date d'inscriptionvendredi 18 février 2005StatutMembreDernière intervention25 avril 2006
-
19 juin 2005 à 11:07
bubuze
Messages postés31Date d'inscriptionvendredi 18 février 2005StatutMembreDernière intervention25 avril 2006
-
19 juin 2005 à 11:07
[XML/DTD/XSL/CSS/HTM] Exemple affichage d'images (tutorial)
Bonjour !
j'avance pas à pas en xml/xsl -> html, dans le but de créer des galeries de photos paramétrées...
[EDIT : je pense que c'est un bon exemple pour avancer en xsl après
vous être ingurgité les tutoriels XML/DTD/XSL disponibles sur le net.
Voir solution tutorisée (tutorialisée?) dans le message suivant]
Définition du problème :
pour chaque paragraphe, j'insère un nombre variable d'images :
Maintenant, si je veux améliorer cet affichage, et faire en sorte que
les images aient la même hauteur, et soient toujours affichées sur une
largeur imposée, ça se complique, j'ai maintenant besoin de la somme
des rapports hauteur/largeur des images.
et bien sûr, le code suivant serait trop simple :
<!-- A MARCHE PAS -->
<xsl:variable name="larg_imgs">
<xsl:value-of select="sum(image/@l_orig div image/@h_orig)" />
</xsl:variable>
j'ai essayé pas mal d'autres formulations, jusqu'à recréer une variable
node avec en éléments les rapports l/h, mais je ne crois pas avoir le
droit d'en calculer la somme :
<!-- A MARCHE PAS -->
<xsl:variable name="test" >
<racine>
<xsl:for-each select="image">
<element>
<xsl:value-of select="number(@l_orig div @h_orig)" />
</element>
</xsl:for-each>
</racine>
</xsl:variable>
<xsl:value-of select="sum($test)" />
Voilà !
PS :
pour ceux que ça intéresse, à partir de n images, pour les afficher sur
sur largeur X, et qu'elles aient la même hauteur sans modifier leur
ratio h/l
avec tot_ratio = somme de tous les rapports largeur / hauteur des images
La difficulté vient principalement de ce calcul tot_ratio,
qui ne peut être réalisé simplement avec un :
"sum(@l_orig div @h_orig)"
D'après grégory, la seule solution est la méthode itérative
(puisqu'une xls:variable est en fait une constante :-/)
Plongeons et creusons pas à pas notre trou (ou plutôt résultat) :
Le principe consiste à calculer le ratio de la première image,
puis de le "transmettre" à l'image suivante, qui l'additionnera
à son propre ratio avant de l'envoyer à l'image d'après etc...
jusqu'à ce qu'il n'y ait plus d'image (dans le paragraphe).
Lorsqu'il n'y a plus d'image, il n'y a plus de ratio à calculer,
on affiche alors la valeur qui a été transmise par l'image précédente,
(qui était logiquement la dernière du paragraphe).
Techniquement, on utilisera une fonction avec deux paramètres :
- la somme des ratios envoyée par l'image précédente
- la "référence" de l'image courante, celle qu'il faut traiter
La fonction doit être capable de lire la largeur et la hauteur de l'image courante :
Rq : on prendra soin d'appeler cette fonction à partir d'un noeud parent de image,
donc à partir de "paragraphe" dans notre cas.
Mais que se passe-t-il si la position à laquelle nous nous trouvons ne correspond plus à une image ?
Nous renverrons le résultat !
Il va falloir tester cette condition :
Dans le cas général, il faudra calculer le ratio de l'image courante,
l'additionner à la somme des ratios des images précédentes, et
transmettre le tout à l'image suivante (qu'elle existe ou pas, nous
avons vu que si elle n'existe pas, on prend alors la décision de
renvoyer le résultat).
c'est là qu'intervient la récursivité, nous sommes dans une fonction et nous rappelons cette même fonction,
mais avec des paramètres qui auront évolués (le $total a changé, et la position est incrémentée) :
Dans le cas final, on se contente d'afficher le total passé en paramètre
(pour les sceptiques : ça marche !)
exemple de fonctionnement si nous avons 3 images :
tot_ratio(tot=0,pos=1)
il y a une image (pos=1tot_ratio(tot=ratio1,pos=2)
il y a une image (pos=2tot_ratio(tot=r1+r2,pos=3)
il y a une image (pos=3tot_ratio(tot=r1+r2+r3,pos=4)
il n'y a plus d'image
-> AFFICHE tot
La fonction est maintenant écrite, reste à l'initialiser, au bon moment et au bon endroit :
Dans mon cas, mon fichier xsl commence par définir une "variable" :
puis traite la racine du xml, et se termine par notre fonction :
900
C'est bien sûr dans le corps du html que nous ferons notre appel à la fonction.
Tout d'abord un traitement à réaliser indépendamment, pour chaque paragraphe :
(Rq : vous aurez probablement à traiter chaque page avant
de traiter chaque paragraphe, hors sujet dans notre cas)
Dans chaque paragraphe, nous commençons par calculer ce fameux total_ratio,
on confirme, on vérifie qu'on est bien sur le noeud parent de "image",
on peut lancer notre calcul itératif :
0
1
Le résultat s'affiche à l'écran, et si je veux le stocker ?
Aussi incroyable que ça puisse paraître, tout simplement
en encadrant cet appel par une définition de variable :
0
1
Voilà c'est tout !
Je ne me défausse pas pour autant, on a bien envie de les voir bien rangées ces images ?
Nous pouvons les mettre dans un paragraphe :
Nous sommes toujours sur le noeud "parapraphe", et nous allons afficher chaque image :
Calculons la largeur et la hauteur modifiée de cette image
(d'après la formule du début et le désormais fameux total_ratio) :
Et affichons cette image, suivie d'un espace pour les séparer "proprement" :
Bon ben c'est fini ?
Reste plus qu'à recomposer...
[mettez tout dans le même répertoire
exemple.xml (page à appeler dans le navigateur)
exemple.dtd (appelé par exemple.xml)
exemple.xsl (appelé par exemple.xml, traité par le navigateur récent)
exemple.css (appelé par le navigateur via exemple.xsl)
]
exemple.dtd
exemple.xml (pensez à mettre les exemplex.jpg dans le même dossier) :
l_orig="400" h_orig="398" sont les dimensions originales de l'image
(un jour je saurais les trouver automatiquement)
un coup d'explorateur de fichier vous informera facilement...