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 Icône de vignette et choisissez 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 URL de l’image, 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 Appliquer.

L'image remplace immédiatement l'icône sur la vignette. Dans le sous-menu Icône de vignette, l'élément Image personnalisée est désormais marqué d'une coche.

Le champ URL de l’image

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 Appliquer 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 un clic sur un dossier parent dans ce chemin permet d’y revenir. Seuls les fichiers image sont listés - PNG, JPEG, GIF, SVG, WebP et BMP ; un dossier sans image ni sous-dossier affiche Aucune image dans ce dossier.

Préparer l'image

L’image est affichée à la Taille d’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 Couleur de police de la vignette : elle est affichée avec ses propres couleurs. Le paramètre 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 : vérifiez que les visiteurs disposent d’un accès en lecture à la bibliothèque et à l’image. 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 Icône de vignette - cela supprime l'image personnalisée - ou rouvrez Image personnalisée et cliquez sur Supprimer l’image dans la boîte de dialogue.

Pour en savoir plus sur le produit : https://vitextra.com/fr/products/smart-tiles