Afficher la vignette ou l'illustration

Deux images peuvent être associées à chaque informations: la vignette et l'illustration. La vignette est généralement une version en petite dimension de l'illustration.

De même, une vignette est associée à chaque source d'information (elle sera la même pour toutes les informations provenant de cette source).

pour faire apparaître l'une ou l'autre de ces images, il faut insérer un élément <vignette/>, <illustration/> ou <vignette-source/> dans l'élément <affichage>.

Remarque: si vous n'utilisez pas cet élément <affichage>, la vignette est affichée par défaut à droite de la page, le texte de l'information venant s'enrouler autour de celle-ci.

Dans cet exemple, on affichera dans l'ordre: le titre, la vignette et l'aperçu. Par défaut, comme le montre l'exemple, la vignette est affichée à droite et le texte qui la suit (ici, le texte de l'aperçu) vient se placer à sa gauche en s'enroulant autour de l'image.

Exemple

<valves style="cadre2">
   <affichage>
      <titre/>
      <vignette/>
      <aperçu/>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="colomb"/> 
</valves>

loading...ajax1

Dans cet exemple, on affichera dans l'ordre: le titre, une ligne d'information contenant les catégories et la date de publication, l'illustration et le contenu de l'information. L'illustration sera ici affichée seule sur une ligne et positionnée au centre de cette ligne.

L'exemple montre également comment régler la taille de l'image et afficher une ombre autour de l'image.

Exemple

<valves style="cadre2">
   <affichage>
     <titre/>
     <groupe>
         <catégories/>
         <date-publication/>
      </groupe>
      <illustration position="centre" largeur="130" hauteur="150">
         <ombre position="inférieur-droit" couleur="noir" taille="5"/>
      </illustration>
      <contenu/>
   </affichage>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" identificateurs="colomb"/> 
</valves>

loading...ajax2

Dans cet exemple, qui utilise trois sources différentes, c'est la vignette de la source qui est affichée>.

Celle-ci est réduite à un carré de 26x26 et cette réduction est contrôlée par différents paramètres.

Exemple

<valves maximum="3" style="class1">
   <affichage>
      <titre/>
      <vignette-source hauteur="26" largeur="26" position="gauche-texte">
         <compression-maximale hauteur="0" largeur="0"/>  
         <déformation-maximale valeur="500"/>                     
      </vignette-source>
      <aperçu/>
   </affichage>
   <source-babelbox box="1" maximum="1" type="actualité"/>
   <source-rss href="http://www.lesoir.be/feed/La%20Une/destination_une_block" maximum="1"/>
   <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" maximum="1"/>
</valves>

loading...ajax3

Comme le montre ces exemples, le système offre de nombreuses possibilités d'affichage, grâce à des attributs et des éléments à placer dans les éléments <vignette> et <aperçu>.

Les différentes possibilités sont décrites dans les pages qui suivent:

Positionnement de l'image:
l'image peut être affichée seule sur une ligne, alignée à gauche, centrée ou alignée à droite;
l'image peut être affichée à gauche ou à droite, avec le texte de l'information qui viendra se placer à droite ou à gauche de l'image;
Espacement autour de l'image:
l'espace entre l'image et le texte qui l'entoure peut être ajusté individuellement en haut, en bas, à gauche et à droite;
Redimensionnement de l'image:
l'image peut être automatiquement redimensionnée à une taille fixe, afin que chaque information se présente de la même façon;
la taille fixe peut être appliquée sur la hauteur et la largeur, la hauteur uniquement ou la largeur uniquement;
Déformation de l'image:
l'image peut être tronquée pour éviter de trop la reduire au risque de perdre en qualité;
des bandes horizontales ou verticales peuvent être ajoutées à l'image pour éviter de trop l'agrandir au risque de perdre en qualité;
Filtrage des images:
l'image peut ne pas être affichée si ses dimensions sont trop petites, ou au contraire trop grandes;

Les images dans un flux RSS

Dans le cas d'un flux RSS, bien que souvent présentes, les images ne sont pas distribuées en tant que telles.

L'image est en effet distribuée directement dans le texte de l'information à l'aide d'une balise html <img src="..."> avec comme conséquence que, dans la plupart des lecteurs RSS, la mise en page est imposée par ce code html sans possibilité de modifier la position de l'image, ni sa taille, etc..

Il n'est pas possible non plus de ne pas afficher ces images, ce qui pourrait être utile dans certains cas. Certains éditeurs en effet, malheureusement de plus en plus nombreux, profitent des flux RSS pour diffuser parfois de manière "agressive" de la publicité via des images insérées automatiquement dans ces flux.

Pour éviter cela, Sitemanager extrait toutes les balises <img src=..."> du contenu de l'information. Elle place alors la première qui répond à vos critères dans la vignette et l'illustration de l'information, que vous pourrez afficher à votre guise, avec le contenu de celle-ci expurger des images que vous ne voulez pas voir.

page suivante

English	中文	Page d'accueil	Contacts	Plan des campus
					pages annuaire