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 3 methods at your service :

If you want to select your element use this: sym.$("myImage").

If your element is inside a symbol use this: sym.getSymbol("mySymbol").$("myImage").

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.

$(sym.$("myElement")).css('background-image', '');

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.

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.

addAndAdaptImage

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

ADventori.Display.addAndAdaptImage(element, url, 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.

Example

Download the example Download the example