Utiliser une image personnalisée comme icône de vignette

Introduction

Les cinq jeux d'icônes de Smart Tiles couvrent la plupart des liens d'intranet, mais certaines destinations méritent leur propre image : le logo d'un système partenaire, la marque d'un projet interne, une icône dessinée dans le style de l'entreprise. Pour ces cas, le composant WebPart accepte n'importe quelle image à la place de l'icône. Cet article explique comment attribuer l'image, ce qu'il faut préparer et comment l'image est affichée.

Attribuer une image

1. Ouvrez la page en mode édition et cliquez sur le bouton … de la vignette.
2. Pointez sur Tile Icon (Icône de la vignette) et choisissez Custom image (Image personnalisée). La boîte de dialogue Image s'ouvre.
3. Fournissez l'image de l'une des deux manières suivantes :
   • saisissez ou collez son adresse dans le champ Image URL, ou
   • parcourez les bibliothèques du site dans la liste située sous le champ : cliquez sur une bibliothèque, ouvrez des dossiers si nécessaire et cliquez sur l'image. Son adresse est insérée dans le champ.
4. Cliquez sur Apply (Appliquer).

L'image remplace immédiatement l'icône sur la vignette. Dans le sous-menu Tile Icon, l'élément Custom image est désormais marqué d'une coche.

Le champ Image URL

Le champ accepte une adresse absolue commençant par https:// ou un chemin commençant par / — par exemple /sites/intranet/SiteAssets/logos/sap.svg. Les autres formes sont refusées avec un message sous le champ, et le bouton Apply reste désactivé.

Parcourir les bibliothèques du site

La liste située sous le champ commence par les bibliothèques de documents du site actuel. Cliquez sur une bibliothèque pour afficher ses dossiers et les images qu'elle contient sous forme de miniatures ; l'étiquette au-dessus de la liste indique le chemin où vous vous trouvez, et Back (Retour) remonte d'un niveau. Seuls les fichiers image sont listés — PNG, JPEG, GIF, SVG, WebP et BMP ; un dossier sans image ni sous-dossier affiche No images in this folder (Aucune image dans ce dossier).

Préparer l'image

L'image est dessinée à l'Icon size (Taille de l'icône) du composant WebPart — entre 20 et 64 pixels — et mise à l'échelle pour tenir dans ce carré en conservant ses proportions. Pour un résultat net :

• utilisez une image carrée dont le sujet remplit le cadre ; les logos larges deviennent petits lorsqu'ils sont comprimés dans un carré ;
• privilégiez le format SVG, ou un PNG d'au moins 128 × 128 pixels, afin que l'image reste nette sur les écrans haute résolution ;
• utilisez un arrière-plan transparent, afin que l'image se pose sur la couleur de la vignette plutôt que dans un cadre blanc ;
• vérifiez le rendu de l'image sur la couleur de la vignette — un logo sombre disparaît sur une vignette sombre.

Contrairement aux icônes standard, une image personnalisée ne prend pas la Font Color (Couleur de police) de la vignette : elle est affichée avec ses propres couleurs. Le paramètre Shadow (Ombre) du composant WebPart s'applique aux images personnalisées de la même manière qu'aux icônes.

Où stocker les images

La bibliothèque Site Assets du site est l'emplacement naturel : tous les visiteurs du site peuvent la lire, et elle est incluse lors de la sauvegarde ou de la restauration du site. Toute autre bibliothèque ou tout autre site convient, à condition que les personnes qui voient la vignette puissent lire l'image — un visiteur sans accès à l'image voit un espace vide à l'endroit où l'icône devrait se trouver.

Supprimer l'image

Pour revenir à une icône, choisissez une icône dans n'importe quel jeu du sous-menu Tile Icon — cela supprime l'image personnalisée — ou rouvrez Custom image et cliquez sur Remove image (Supprimer l'image) dans la boîte de dialogue.