Le Paywall Builder et le Flow Builder proposent trois types d’éléments média dans la catégorie Media : Image, Vidéo et Icône.

Image

Importez un fichier .JPG, .PNG, ou .WEBP de 20 Mo maximum.

Les GIF et WEBP animés ne sont pas pris en charge. Pour ajouter du mouvement, utilisez plutôt un élément Video.

• Content mode — contrôle la façon dont l’image remplit son conteneur lorsque vous définissez sa hauteur. Voir Dimensionnement de l’image.
• Use custom media ID — voir Custom media ID ci-dessous.

Dimensionnement des images

Une image a ses propres proportions, et le cadre que vous lui attribuez peut ne pas correspondre. Définissez d’abord la largeur, puis décidez de la hauteur :

• Hauteur automatique. L’image conserve sa forme : la hauteur découle de la largeur définie. Content mode se désactive, car il n’y a rien à rogner.
• Hauteur fixe ou Fill. Le cadre acquiert ses propres proportions, et Content mode gère le décalage :
  • Fit. Met l’image à l’échelle pour qu’elle tienne dans le cadre et laisse de l’espace vide.
  • Fill. Rogne ce qui déborde. Par défaut.

Pour afficher une image sans recadrage quelle que soit la largeur d’écran, utilisez la largeur Fill avec la hauteur Auto. Avec une hauteur fixe, le recadrage en haut et en bas varie d’une taille d’écran à l’autre.

Vidéo

Importez un fichier .MP4 ou .WEBM de 50 Mo maximum et d’une durée maximale de 30 secondes. La résolution minimale est de 640x640 pixels.

• Aspect — contrôle comment la vidéo remplit son conteneur lorsque vous définissez sa hauteur. Voir Dimensionnement de la vidéo.
• Loop — rejoue la vidéo en boucle. Activé par défaut.
• Use custom media ID — voir Custom media ID ci-dessous.

Les vidéos ne sont pas lues dans l’aperçu de l’éditeur — le canvas affiche une image fixe. Sur l’appareil au moment de l’exécution, la vidéo est lue en mode muet par défaut. Avec Loop activé, elle se répète indéfiniment.

Dimensionnement de la vidéo

Une vidéo a ses propres proportions, et la boîte dans laquelle vous la placez peut ne pas leur correspondre. La hauteur détermine ce qui se passe :

• Hug height. La hauteur suit les proportions naturelles de la vidéo.
• Fixed ou Fill height. La propriété Aspect résout le décalage :
  • Fit. Réduit la vidéo entière pour qu’elle tienne dans la boîte et laisse de l’espace vide.
  • Fill. Rogne ce qui dépasse. Par défaut.

Lorsqu’Adapty ne parvient pas à lire les proportions d’une vidéo lors de l’importation, il affiche un avertissement : « Could not determine video dimensions. Set a fixed height to ensure the video displays correctly. » Donnez une hauteur fixe à la vidéo, ou assurez-vous que le conteneur qui la contient en possède une. Sans cela, sa hauteur peut se réduire à 0.

Déclencher une action à la fin de la vidéo

L’élément Vidéo prend en charge un déclencheur On playback finished qui s’active lorsque la vidéo arrive à sa fin. Configurez-le dans le panneau Interactions pour naviguer vers un autre écran, afficher un CTA ou exécuter toute autre action.

Icône

Choisissez parmi la bibliothèque Tabler Icons intégrée, qui propose des milliers d’icônes en deux styles visuels :

• Stroke — contour uniquement.
• Filled — remplissage plein.

Recherchez une icône dans le sélecteur par mot-clé. Définissez la couleur de l’icône dans le sélecteur Color — choisissez un style de couleur enregistré ou définissez une couleur personnalisée.

Localiser les médias

Les éléments Image et Vidéo peuvent contenir un fichier différent par locale :

1. Si le panneau Localizations est ouvert, fermez-le pour afficher le panneau de propriétés.
2. Dans la barre d’outils inférieure, définissez Locale sur la locale cible.
3. Sélectionnez l’élément. Ensuite, dans le panneau de propriétés, importez le fichier localisé.
4. Une fois terminé, remettez Locale sur la locale par défaut. Tant qu’une autre locale est sélectionnée, le texte que vous modifiez dans le panneau de propriétés modifie la traduction de cette locale.

Dans une locale sans fichier propre, l’élément affiche le fichier de la locale par défaut. Vous pouvez également importer un fichier pour chaque locale dans le panneau Localizations.

Limitations

Vous ne pouvez pas localiser les éléments suivants :

• Les icônes
• Le Fill d’un écran ou d’un conteneur — cela inclut les arrière-plans d’écran et l’image ou la vidéo d’arrière-plan propre à un conteneur, définis depuis la section Fill. Pour varier une image ou une vidéo selon la locale, ajoutez-la en tant qu’élément Image ou Video indépendant — ceux-ci prennent en charge un fichier spécifique à la locale, comme décrit dans Localiser les médias.
• Les identifiants de médias personnalisés

ID média personnalisé

Associez un ID média personnalisé à un élément image ou vidéo pour le remplacer à l’exécution depuis le code de votre application. Utilisez cette option pour des visuels personnalisés — par exemple, pour afficher l’avatar sélectionné par l’utilisateur.

Le média que vous importez dans le Flow & Paywall Builder sert de contenu de secours. Si votre code ne fournit pas de média pour cet ID à l’exécution, c’est le contenu de secours qui s’affiche.

Un identifiant média personnalisé ne peut remplacer un fichier que par un autre du même type — une image par une image, une vidéo par une vidéo. Si les types ne correspondent pas, le contenu de secours s’affiche.

Pour activer un identifiant média personnalisé sur un élément Image ou Vidéo :

1. Cochez la case Use custom media ID sous la zone d’importation.
2. Saisissez un identifiant média.
3. Importez une image ou vidéo de secours.

Dans le code de votre application, récupérez le média par son identifiant — consultez Personnaliser les ressources pour l’API SDK.