DYNAMISER ET ADAPTER LA TAILLE D’UNE IMAGE
Il est possible de dynamiser les images de votre publicité sans que celles-ci soient déformées et en gardant leur entière visibilité.
Pour créer une zone d’images dynamiques et redimensionnables, ajoutez un attribut id unique, et définissez la valeur de l’ image (addAndAdaptImage) par défaut.
Une fois la créa dynamisée par notre AdServer, les images changeront en fonction des paramètres établis ( Géolocalisation, météo, date/heure, cookies, retargeting… ).
Pour cela, vous devez donner un width et un height à la div contenant votre image pour que celle-ci s’adapte aux dimensions voulues.
Méthodes de personnalisation disponibles :
- addImage(element,url,urldefault) : Cette méthode vous permet d’ajouter une image dans le conteneur spécifié.
- adaptImage(element,displayOption) : Cette méthode vous permet d’ajuster la taille de l’image par rapport à son conteneur.
- addAndAdaptImage(element,url,urldefault,displayOption) : Cette méthode vous permet d’ajouter une image à un container en ajustant sa taille par rapport à son container.
displayOption :
- {fit:’cover’} : Cette méthode vous permet de couvrir toute la div par l’image (si l’image est trop grande , elle sera centrée sans prendre en compte les débordements).
- {fit:’contain’} : Cette méthode vous permet d’afficher l’image entière dans la div, c’est l’option par défaut.
- {with : size, height : size} : Cette méthode vous permet de définir la taille du conteneur
Important : Sous Edge vous avez la possibilité de declarer un élément div en tant qu’image , cette option affecte l’image en tant que background-image pour cette élément , si vous souhaitez dynamiser votre background avec l’enabler , vous devrez initialiser un background vide avant d’utiliser addImage ou adaptImage
exemple :
$(sym.$("votreElement")).css('background-image', '');
Vous pouvez également définir la taille du conteneur directement depuis la méthode adaptImage et addAndAdaptImage
ADventori.Display.addAndAdaptImage(sym.$("imgContainer1"),ADventori.data.photoV, ADventori.data.photo,{width:241,height:153});