Utilisation des valves, génération du site web de l'ULB - format xml
sommairesommaireindexindexdébutdébutpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

Redimensionnement automatique de l'image

Par 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

Choix de la hauteur et de la largeur de l'image

Vous pouvez changer la dimension par défaut un utilisant un attribut hauteur="..." et/ou un attribut largeur="..." dont la valeur est un entier supérieur à 0. Cette valeur donne la taille à utiliser en nombre de pixels.

La valeur peut également être égale à 0, dans ce cas on utilisera la taille réelle (hauteur ou largeur) de l'image originale.

Dans cet exemple, la hauteur est fixée à 150, la largeur à 50.

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

Choix de conserver la hauteur et/ou la largeur de l'image originale

Si vous utilisez la valeur 0 pour la hauteur et/ou la largeur, la hauteur et/ou largeur de l'image originale sera conservée.

Dans ces deux exemples, la taille réelle de l'image est conservée: hauteur est à 0, et largeur est à 0.

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
ULB - entreprise écodynamique