Dynamize Picture

Once created driven by our AdServer, images change based on established parameters ( Geolocation, weather, date/time, cookies, retargeting …).

To dynamize pictures you have 4 methods at your service :

setImageUrl

The setImageUrl function allows you to insert an image source. You can only use it on an <img> tag. You have to remove the src attribute.

ADventori.Display.setImageUrl(element, data, urlDefault);

This function needs three parameters:

  • element: The targeted element where the URL of the image will be inserted.
  • data: The data that will be sent in this element.
  • urlDefault: the default URL in case the first URL inside data doesn’t exist.

If you dynamize an <img> tag , You have to remove the src attribute.

Don’t forget to add some css to resize your picture.

Example

adaptImage

The adaptImage function allows you to adapt an image size to its container.

ADventori.Display.adaptImage(element, displayOption);

This function needs two parameters:

  • element: The picture which needs to be resized.
  • displayOption: optional
    • {fit:‘cover’}: This option allows you to cover the entire container with an image (if the image is too big, it will be centered without taking into account the overflow).
    • {fit:‘contain’}: This option allows you to display the whole image in its container, it’s the default option.
    • {width : size, height : size} : This option allows you to define the size of its container.

The container of the picture targeted by this function has to be a block element and have the following CSS properties: width, height.

You don’t need to add some css to resize your picture.

Example

addImage

The addImage function allows you to insert an <img> tag inside a container.

ADventori.Display.addImage(element, data, urlDefault);

This function needs three parameters:

  • element: The targeted element where the <img> tag will be inserted.
  • data: The data that will be sent in this element.
  • urlDefault: the default URL in case the first URL inside data doesn’t exist.

Don’t forget to add some css to resize your picture.

Example

addAndAdaptImage

The addAndAdaptImage function allows you to insert an image tag inside a container.

ADventori.Display.addAndAdaptImage(element, data, urlDefault, displayOption);

This function needs four parameters:

  • element: The targeted element where the <img> tag will be inserted.
  • data: The data that will be sent in this element.
  • urlDefault: the default URL in case the first URL inside data doesn’t exist.
  • displayOption: optional
    • {fit:‘cover’}: This option allows you to cover the entire container with an image (if the image is too big, it will be centered without taking into account the overflow).
    • {fit:‘contain’}: This option allows you to display the whole image in its container, it’s the default option.
    • {width : size, height : size} : This option allows you to define the size of its container.

The element targeted by this function has to be a block element and have the following CSS properties: width, height.

Example