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 un élément Vidéo à la place.

Un élément Image peut afficher une image différente selon la langue. Pour afficher une image différente en mode sombre, ajoutez un fichier sombre à l’élément.

• 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 — relit 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 canevas affiche une image fixe. Sur l’appareil au moment de l’exécution, la vidéo est lue sans son par défaut. Avec Loop activé, elle se répète indéfiniment.

Un élément Vidéo peut avoir une vidéo différente pour chaque locale. Pour afficher une vidéo différente en mode sombre, ajoutez un fichier sombre à l’élément.

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 dans 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. Vous ne pouvez appliquer qu’un seul style de calque avec une couleur unie.

Localiser les médias

Les éléments et calques suivants peuvent contenir un fichier différent par locale :

• Les éléments Image et Vidéo.
• Les calques image et vidéo dans un remplissage, comme l’arrière-plan d’un écran.
• Les calques image et vidéo d’un style de couleur, dans chaque version claire ou sombre séparément.

Pour télécharger un fichier localisé :

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, réglez Locale sur la locale cible.
3. Sélectionnez l’élément, ou cliquez sur une zone vide de la prévisualisation pour un arrière-plan d’écran.
4. Dans le panneau de propriétés, importez le fichier localisé.
5. Remettez Locale sur la locale par défaut, afin que les modifications ultérieures s’appliquent de nouveau à la locale par défaut.

Pour un style de couleur, remplacez l’image ou la vidéo dans le style pendant que la locale cible est active.

Dans une locale sans fichier propre, les utilisateurs voient le fichier de la locale par défaut. Pour un style de couleur, chaque version revient séparément à 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 icônes ni les identifiants de médias personnalisés. Pour localiser une image ou une vidéo ayant un identifiant de média personnalisé, utilisez l’identifiant pour remplacer un fichier localisé au moment de l’exécution.

ID média personnalisé

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

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

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.