Les images d’un modèle Slides peuvent soit rester identiques dans chaque document généré, soit être automatiquement remplacées par des images enregistrées dans Ezus.
Cet article explique comment utiliser les variables d’image dynamiques et choisir le comportement approprié en fonction du type d’image que vous souhaitez afficher.
Images statiques vs. images dynamiques
Avant d’ajouter une image à votre modèle, déterminez si elle doit être statique ou dynamique.
Les images statiques restent identiques à chaque génération du document. Utilisez-les pour des éléments tels que :
Images d’arrière-plan
Éléments décoratifs
Éléments de marque fixes
Images qui ne doivent pas dépendre du projet
Les images dynamiques proviennent des informations enregistrées dans Ezus et changent en fonction du projet utilisé pour générer le document.
Elles peuvent récupérer des images associées à des informations telles que :
Hébergements
Activités
Produits
Destinations
Voyageurs
Clients
Par exemple :
$$client.logo$$
récupère le logo associé au client, tandis que :
$$days.1.images.1$$
récupère la première image associée au Jour 1.
💡 Utilisez une variable d’image dynamique chaque fois que l’image doit s’adapter automatiquement au projet généré.
Ajouter une variable d’image dynamique
Pour ajouter une image dynamique :
Créez un conteneur d’image dans votre modèle Slides.
Assurez-vous que le conteneur est carré.
Ouvrez le Variable Drawer.
Recherchez la variable d’image correspondant aux informations que vous souhaitez afficher.
Insérez la variable dans le conteneur d’image.
Choisissez le comportement d’image approprié : standard,
cropoucenter.Générez le document et vérifiez le résultat.
⚠️ Les images dynamiques doivent utiliser un conteneur d’image carré. Une image peut sembler correcte lors de la modification du modèle, mais s’afficher de manière incorrecte dans le document généré si son conteneur n’est pas carré.
Choisir le bon comportement d’image
Vous pouvez utiliser la variable d’image standard ou ajouter crop ou center en fonction de la manière dont vous souhaitez afficher l’image.
Utiliser crop pour les photographies et les mises en page visuelles
Pour les photographies, nous recommandons d’utiliser :
[crop]
Par exemple :
$$client.logo.[crop]$$
L’image remplit la zone d’image disponible et est recadrée si nécessaire pour s’adapter à la forme.
Cette option est particulièrement utile pour :
Photos d’hébergements
Photos de destinations
Photos d’activités
Autres contenus visuels pour lesquels remplir toute la zone d’image est plus important que d’afficher l’intégralité de l’image d’origine
💡 crop est généralement la meilleure option pour les photographies, en particulier lorsque les images sources ont des proportions différentes.
Utiliser center lorsque l’image complète doit rester visible
Utilisez :
[center]
lorsque le recadrage risque de supprimer des parties importantes de l’image.
Par exemple :
$$client.logo.[center]$$
L’image complète reste visible et est centrée dans la zone disponible.
Cette option est particulièrement utile pour :
Logos
Graphiques contenant du texte
Images dont les bords contiennent des informations importantes
Utiliser la variable d’image standard pour un usage général
De manière générale, vous pouvez également utiliser la variable d’image standard sans ajouter de modificateur d’image.
Par exemple :
$$client.logo$$
ou :
$$days.1.images.1$$
Cela utilise le comportement d’image standard configuré pour l’image.
Cas d’utilisation | Syntaxe recommandée |
Usage général |
|
Photographie / remplir la zone disponible |
|
Logo / conserver l’image complète visible |
|
Tester l’image générée
Générez toujours le document après avoir ajouté ou modifié une variable d’image.
Vérifiez que :
L’image attendue s’affiche.
L’image s’adapte correctement à la zone prévue.
Aucun contenu important n’a été recadré.
Le résultat reste adapté avec des images de proportions différentes.
Si le résultat ne convient pas, essayez de passer de la variable standard à crop ou center en fonction du type d’image.
💡 Lorsque cela est possible, testez le modèle avec plusieurs projets. Les images téléchargées dans Ezus peuvent avoir des dimensions et des proportions différentes. Tester une seule image peut donc ne pas suffire pour comprendre comment la mise en page se comportera avec d’autres projets.
⚠️ Les modificateurs d’image Slides tels que [crop] et [center] ne fonctionnent pas de la même manière dans les modèles HTML. En HTML, la taille, le recadrage, l’alignement, les proportions et le positionnement des images doivent être contrôlés avec du CSS.