Widget Thumbnail
Le widget Thumbnail (miniature) affiche un média sur une page à partir d'un lien : une image, une vidéo dans un cadre ou un avatar rond. Il ne fait qu'afficher un contenu : il ne porte aucune valeur et les utilisateurs ne peuvent pas le modifier.
Le widget Image est une bannière : une image de fond que vous téléversez, avec un titre et une description par-dessus. Utilisez le widget Thumbnail pour afficher une image seule, une vidéo ou un portrait.
Ajouter le WidgetLien direct vers Ajouter le Widget
Le widget se trouve dans le groupe Basic de la palette de widgets. Vous pouvez aussi le trouver en tapant thumbnail, miniature, video ou avatar dans Search widgets.
Sur le canevas, le widget est un emplacement qui porte le nom de son type de média (image, video ou avatar). Le média lui-même n'apparaît que dans l'aperçu (Preview) et sur la page publiée.
Carte GlobalLien direct vers Carte Global
| Option | Description |
|---|---|
| Name | Le nom du widget dans l'éditeur. |
| Variable/Model | Le nom du widget dans la page. Aucune valeur n'est enregistrée sous ce nom. |
| Media | image (par défaut), video ou avatar. Les autres options de la carte dépendent de ce choix. |
| Source | Le lien vers le média (voir Source). |
| Size | Avatar uniquement (voir Avatar). |
| Height (px), Width (px) | Vidéo uniquement (voir Vidéo). |
SourceLien direct vers Source
Le widget n'a pas de bouton de téléversement : Source contient un lien, qui peut être :
- un chemin sur votre serveur, comme
/uploads/<id du fichier>/name/photo.png: téléversez le fichier dans Fichiers, puis copiez son lien avec l'icône de copie ; - une URL complète commençant par
https://.
Un fichier privé n'est visible que par les utilisateurs connectés : sur une page ouverte à tous, utilisez un fichier public (voir Contrôle d'Accès et URLs des Fichiers).
Source est un lien fixe. Une expression {{photo}} n'est pas remplacée par la valeur de la variable, donc le média ne se charge pas, et la syntaxe ${...} du Lecteur PDF peut empêcher le widget de s'afficher. Pour afficher une image qui dépend des données de la page, utilisez un widget Html :
<img :src="models.photo" style="width: 200px" />
Types de MédiaLien direct vers Types de Média
ImageLien direct vers Image
L'image remplit la zone du widget sans être déformée : ce qui dépasse de la zone est recadré. Réglez la taille dans la carte Style :
| Option | Valeur | Par défaut | Si le champ est vide |
|---|---|---|---|
| Width | Un nombre de pixels, sans unité | 720 | L'image prend toute la largeur de sa colonne (0 fait de même) |
| Height | Un nombre de pixels, sans unité | 420 | La hauteur suit les proportions de l'image |
Une valeur avec une unité, comme 50% ou 300px, est ignorée et donne le même résultat qu'un champ vide. Pour que l'image suive la largeur de sa colonne sur tous les écrans, laissez Width vide.
Si l'image ne peut pas être chargée (pas de source, lien erroné), le widget affiche une zone grise avec le texte FAILED, à la taille réglée dans Width et Height. Si Height est vide, cette zone se réduit à une fine bande (environ 19 pixels de haut).
VidéoLien direct vers Vidéo
Source s'ouvre dans un cadre (iframe) à l'intérieur de la page : le lien doit donc mener à une page qui accepte d'être intégrée. Pour YouTube, utilisez le lien d'intégration, https://www.youtube.com/embed/<id de la vidéo> : un lien https://www.youtube.com/watch?v=... est refusé par YouTube dans un cadre. Le cadre autorise le plein écran et la lecture automatique ; c'est la page intégrée qui décide de les utiliser.
Réglez la taille du cadre dans la carte Style, avec Width et Height (720 × 420 pixels par défaut). Ils contiennent les mêmes valeurs que Width (px) et Height (px) de la carte Global, dont les champs sont étroits.
Utilisez des nombres de pixels, sans unité. Un champ vide ou une valeur avec une unité est ignoré et le navigateur utilise sa taille de cadre par défaut. Le cadre garde sa taille sur tous les écrans : vérifiez le résultat sur les petits écrans.
AvatarLien direct vers Avatar
L'avatar est un cercle, et l'image est recadrée pour le remplir. Size règle son diamètre en pixels (150 par défaut ; un champ vide donne 100). Les champs Width et Height de la carte Style n'ont aucun effet sur un avatar.
Size doit être un simple nombre. Une valeur comme 120px ou large empêche l'avatar de s'afficher.
Si l'image ne peut pas être chargée, l'avatar est un simple cercle gris.
Carte ValidationLien direct vers Carte Validation
Available et Visible fonctionnent comme sur les autres widgets, et Visible peut contenir une condition comme {{status}} === 'Approved' (voir Règles de Validation). Required et Disable apparaissent dans la carte mais n'ont aucun effet sur ce widget.
Carte StyleLien direct vers Carte Style
- Width et Height : voir Image et Vidéo.
- Class : des classes CSS. Le bouton à côté du champ ouvre les classes dynamiques. Les classes s'appliquent à l'image ou à l'avatar lui-même et, pour une vidéo, au bloc autour du cadre.
L'identifiant affiché en haut du panneau, à côté du type du widget (par exemple #team_photo_1), est celui du bloc autour du média. Utilisez-le dans votre feuille de style. Le widget n'a pas d'option d'alignement : c'est ainsi que vous centrez un avatar ou que vous retirez la bordure que les navigateurs dessinent autour d'un cadre :
#manager_avatar_1 { text-align: center; }
#welcome_video_1 iframe { border: 0; }
Quand votre compte applique son design aux applications, l'image et le cadre de la vidéo prennent les coins arrondis du design.