Dynamize and adapt the size of an image

DYNAMIZE AND ADAPT THE SIZE OF AN IMAGE

You can dynamize your ad images without them being distorted and keeping their full visibility.

To create a zone of dynamic, resizable pictures, add an attribute id unique, and set the value of the image (addAndAdaptImage) by default.

Once the creative is driven by our AdServer, images change according to the established parameters (Geolocation, weather, date / time, cookies, retargeting …).

For this, you must give awidth and a height to the div containing your image to make it fit.

    ADventori.initData({
      "photo": "https://www.w3schools.com/css/img_fjords.jpg",
      "photoV": 'http://img.over-blog-kiwi.com/0/40/01/35/201301/ob_1264f6_location-voiture-guadeloupe-dacia.jpg',
      "photoH": 'http://www.alldigi.com/wp-content/uploads/2010/06/DSC_1332-1333-Panorama.jpg'
    });
    
    ADventori.Display.addImage(document.getElementById('ADventori_img1'), ADventori.data.photoV, ADventori.data.photo);
    ADventori.Display.adaptImage(document.getElementById('ADventori_img1').lastChild, {fit: 'contain'});

    ADventori.Display.addAndAdaptImage(document.getElementById('ADventori_img2'), ADventori.data.photoH, ADventori.data.photo, {fit: 'contain'});

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.

Example :

Download example

Other personalization methods available :

• setImageUrl(element,url,urldefault) : This method lets you change the URL of an image tag.
  

  Caution : If you dynamize an img tag , you don’t need to put the src attribute.

Example :

Download example

You can also define the size of your container directly from the method adaptImage and addAndAdaptImage

example :

ADventori.Display.addAndAdaptImage(document.getElementById('ADventori_img1'),ADventori.data.photoV, ADventori.data.photo,{width:260,height:150});

Download example