Smart Tiles Introduction
Une vignette colorée avec une icône est claire et compacte ; une vignette avec une photographie est engageante. Smart Tiles permet à n'importe quelle vignette d'afficher une image d'arrière-plan à la place d'une couleur unie : une photo des bureaux pour Visit us, une photo de produit pour une page de lancement, une photo d'équipe pour le site d'un service. Cet article explique comment définir l'image, comment elle est affichée et comment garder la vignette lisible.
Définir l'image
- Ouvrez la page en mode édition et cliquez sur le bouton … de la vignette.
- Pointez sur Background Color et choisissez Background image, le premier élément du sous-menu.
- Dans la boîte de dialogue Image, saisissez ou collez l'adresse de l'image dans le champ Image URL, ou parcourez les bibliothèques du site et cliquez sur l'image.
- Cliquez sur Apply.
La boîte de dialogue Image est la même que celle utilisée pour les images d'icônes personnalisées : le champ Image URL accepte une adresse commençant par https:// ou un chemin commençant par /, et la liste située en dessous permet de parcourir les bibliothèques de documents du site actuel, dossier par dossier, en affichant les images sous forme de miniatures. Cette boîte de dialogue est décrite en détail dans KB10244. Utiliser une image personnalisée comme icône de vignette.
Affichage de l'image
L'image remplit toute la vignette : elle est mise à l'échelle de manière à la couvrir entièrement et elle est centrée ; tout ce qui dépasse est rogné sur les bords. La vignette conserve ses proportions : sa largeur est définie par la Size (Taille) de la vignette et sa hauteur par le contenu et l'Internal Indent (Retrait interne). La même image est donc recadrée différemment sur une vignette Small et sur une vignette Full Width.
L'icône, le titre et la description sont dessinés par-dessus l'image, dans la Font Color (Couleur de police) de la vignette.
La couleur sous-jacente
La couleur d'arrière-plan de la vignette ne disparaît pas lorsqu'une image est définie : elle est peinte sous l'image et reste visible pendant le chargement de l'image, à travers les zones transparentes d'un PNG, et si l'image ne peut pas du tout être chargée. Choisissez une couleur proche de la tonalité générale de l'image, afin qu'une vignette en cours de chargement ne s'affiche pas brièvement dans une couleur différente.
📝 Remarque
Le choix d'une couleur dans le menu Background Color supprime l'image d'arrière-plan : l'arrière-plan d'une vignette est soit une image, soit une couleur, jamais les deux. La couleur qui était peinte sous l'image redevient l'arrière-plan visible.
Garder le texte lisible
Un texte placé sur une photographie n'est lisible que dans la mesure où le contraste avec celle-ci le permet. Quelques habitudes aident :
- choisissez des images avec une zone calme (ciel, mur, eau) à l'endroit où se trouvera le titre, ou recadrez l'image de façon à placer une telle zone au centre ;
- utilisez du texte blanc sur les images sombres et du texte noir sur les images claires, et définissez la Font Color en conséquence ;
- activez Shadow (Ombre) dans les paramètres du composant WebPart : l'ombre portée sous l'icône la détache d'un arrière-plan chargé ;
- envisagez de masquer le titre pour les vignettes d'image qui parlent d'elles-mêmes, et de placer le nom dans la Description à la place, afin qu'il apparaisse tout de même dans l'info-bulle.
La miniature YouTube
Lorsque le lien d'une vignette pointe vers une vidéo YouTube, le menu Background Color gagne un élément supplémentaire au-dessus de Background image : Thumbnail (Miniature). Il utilise l'image d'aperçu de la vidéo comme arrière-plan, sans enregistrer d'adresse d'image dans la vignette. Sur la page publiée, une vignette à miniature n'affiche que le bouton de lecture ; son titre et sa description restent dans l'info-bulle.
Exigences relatives aux images
- L'adresse doit utiliser
https://ou être un chemin sur le locataire (tenant) actuel ; les visiteurs doivent disposer d'un accès en lecture à l'image. - Gardez un fichier de taille raisonnable : une photographie de 1200 pixels sur son plus grand côté, enregistrée au format JPEG ou WebP, suffit pour une vignette Full Width et se charge rapidement sur chaque page où le volet est utilisé.
- Les images à arrière-plan transparent laissent apparaître la couleur de la vignette à travers les zones transparentes, ce qui peut servir à créer des designs de type filigrane.
❗ Important
Les images sont chargées par le navigateur du visiteur à partir de l'adresse indiquée dans la vignette. Stockez les images dans une bibliothèque que tous les visiteurs de la page peuvent lire ; Site Assets du même site est le choix habituel. Un visiteur sans accès ne voit que la couleur d'arrière-plan.
Supprimer l'image
Choisissez une couleur dans le menu Background Color, ou rouvrez Background image et cliquez sur Remove image dans la boîte de dialogue. La vignette retrouve sa couleur d'arrière-plan.
💡 Astuce
Les couleurs disponibles pour les vignettes et leur police sont décrites dans KB10043. Couleurs des vignettes dans Smart Tiles.
