DYNAMIZE AND ADAPT THE SIZE OF AN IMAGE
It is possible to boost the images of your ad without them being distorted and keeping their full visibility.
To create a dynamic resizable pictures, add an attribute id unique, and set the value of the image (addAndAdaptImage) by default.
Once created driven by our AdServer, images will change according to the established parameters (Geolocation, weather, date / time, cookies, retargeting …).
For this, you must give a width and a height to the div containing your image to make it fit to its size.
Personalization methods available:
addImage(element,url,urldefault) : This method allows you to add an image to the specified container.adaptImage(element,displayOption) : This method allows you to adjust the image size according to its container.
addAndAdaptImage(element,url,urldefault,displayOption) : This method allows you to add an image in a container and resize it to its container.
displayOption :
- {fit:’cover’} : This option allorw you to cover the entire container with the image (if the picture is to big, it will be center without taking account the overflow).
- {fit:’contain’} : This option allows you to display the entire image in its container, it’s the default option.
- {with : size, height : size} : This options allows you to define the size of its container.
Important : On Adobe Edge you can initialize your element div as an image, this option will put the picture in a background-image property for this element. If you want to dynamize your background with the DCO Enabler, you have to initialize a void background before using our methods addImage, adaptImage, addAndAdaptImage.
example :
$(sym.$("yourElement")).css('background-image', '');
You can also define the size of your container directly from the method adaptImage and addAndAdaptImage
ADventori.Display.addAndAdaptImage(sym.$("imgContainer1"),ADventori.data.photoV, ADventori.data.photo,{width:241,height:153});