Redimensionnement automatique de l'imagePar défaut, une image liée à une information est automatiquement redimensionnée à la taille de 80x80 pixels (80 pixels en largeur, 80 pixels en hauteur). Cela permet d'avoir une mise en page homogène pour l'ensemble des informations. Vous pouvez, grâce à des attributs hauteur="..." et largeur="...", redéfinir cette taille par défaut (ou choisir de conserver la taille de l'image originale). Ce redimensionnement automatique ne se fait pas de manière "brute", ce qui pourrait déformer de manière trop visible l'image. En effet, si réduire une image carrée vers une autre image carrée plus petite ne pose pas de problème, réduire une image de forme rectangle vers une image carrée oblige à déformer celle-ci. Cette déformation est d'autant plus importante que la différence entre la hauteur et la largeur de l'image d'origine est importante. Afin d'éviter cela, le système redimensionne l'image jusqu'à une taille minimale, une taille maximale et une déformation maximale paramètrables. Il procède ensuite, au delà de cette déformation, soit à une troncature de l'image (des bandes verticales ou horizontales de part et d'autres de l'image sont supprimées), soit à l'ajout de bandes verticales ou horizontales autour de l'image. Il est possible également de filtrer (ne pas afficher) les images qui seraient trop petites ou trop grandes. Dans les exemples qui suivent, l'image avec l'hélicoptère possède, dans la source, une largeur de 259 pixels et une hauteur de 194 pixels. Si les valeurs par défaut sont utilisées, celle-ci sera réduite à un carré de 80x80 pixels. Par contre, l'image avec l'éléphant possède à la source une largeur de 100 pixels et une hauteur de 65 pixels. Celle-ci sera donc agrandie en hauteur et réduite, voire tronquée, en largeur. Par défaut, les deux images ci-dessus utilisées en tant que vignette vont être automatiquement redimensionnées afin de s'afficher dans un carré de 80 pixels de largeur et de 80 pixels de hauteur. |
Exemple <valves style="cadre2"> <affichage> <titre/> <vignette/> <aperçu/> </affichage> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="bidon-sauveur"/> </valves> |
loading...ajax1 |
Exemple <valves style="cadre2"> <affichage> <titre/> <vignette/> <aperçu/> </affichage> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="elephant"/> </valves> |
loading...ajax2 |
Exemple <valves style="cadre2"> <affichage> <titre/> <vignette hauteur="150" largeur="50"/> <aperçu/> </affichage> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="bidon-sauveur"/> </valves> |
loading...ajax3 |
Dans cet exemple, la hauteur est fixée à 50, la largeur à 150. |
Exemple <valves style="cadre2"> <affichage> <titre/> <vignette hauteur="50" largeur="150"/> <aperçu/> </affichage> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="bidon-sauveur"/> </valves> |
loading...ajax4 |
Dans cet exemple, la hauteur est fixée à 120, la hauteur à 120 (l'image est agrandie aussi bien en largeur qu'en hauteur et est déformée pour respecter la forme carrée souhaitée). |
Exemple <valves style="cadre2"> <affichage> <titre/> <vignette hauteur="120" largeur="120"/> <aperçu/> </affichage> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="elephant"/> </valves> |
loading...ajax5 |
Dans cet exemple, la hauteur est fixée à 200, la largeur à 100. l'image est agrandie et est déformée jusqu'à une certaine limite. Au-delà, des zones noires apparaissent pour éviter une déformation trop importante. |
Exemple <valves style="cadre2"> <affichage> <titre/> <vignette hauteur="200" largeur="100"/> <aperçu/> </affichage> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="elephant"/> </valves> |
loading...ajax6 |
Exemple <valves style="cadre2"> <affichage> <titre/> <vignette hauteur="0" largeur="0"/> <aperçu/> </affichage> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="bidon-sauveur"/> </valves> |
loading...ajax7 |
Exemple <valves style="cadre2"> <affichage> <titre/> <vignette hauteur="0" largeur="0"/> <aperçu/> </affichage> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="elephant"/> </valves> |
loading...ajax8 |
Dans cet exemple, la hauteur réelle de l'image est conservée (hauteur est à 0) et et largeur est fixée à 80. |
Exemple <valves style="cadre2"> <affichage> <titre/> <vignette hauteur="0" largeur="80"/> <aperçu/> </affichage> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="bidon-sauveur"/> </valves> |
loading...ajax9 |
Dans cet exemple, la largeur réelle de l'image est conservée (largeur est à 0) et la hauteur est fixée à 80. |
Exemple <valves style="cadre2"> <affichage> <titre/> <vignette hauteur="80" largeur="0"/> <aperçu/> </affichage> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="bidon-sauveur"/> </valves> |
loading...ajax10 |