div-image

Image.

JSON

{
  type*: "image",
  accessibility: {
    description: "string",
    hint: "string",
    mode: "string",
    mute_after_action: "bool_int",
    state_description: "string",
    type: "string"
  },
  action: {
    download_callbacks: {
      on_fail_actions: [ div-action, ... ],
      on_success_actions: [ div-action, ... ]
    },
    is_enabled: "bool_int",
    log_id*: "string",
    log_url: "string",
    menu_items: [
      {
        action: div-action,
        actions: [ div-action, ... ],
        text*: "string"
      },
      ...
    ],
    payload: "object",
    referer: "string",
    target: "string",
    typed: div-action-typed,
    url: "string"
  },
  action_animation: {
    duration: "int",
    end_value: "number",
    interpolator: "string",
    items: [ div-animation, ... ],
    name*: "string",
    repeat: div-count,
    start_delay: "int",
    start_value: "number"
  },
  actions: [
    {
      download_callbacks: {
        on_fail_actions: [ div-action, ... ],
        on_success_actions: [ div-action, ... ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_url: "string",
      menu_items: [
        {
          action: div-action,
          actions: [ div-action, ... ],
          text*: "string"
        },
        ...
      ],
      payload: "object",
      referer: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  alignment_horizontal: "string",
  alignment_vertical: "string",
  alpha: "number",
  appearance_animation: {
    type*: "fade",
    alpha: "number",
    duration: "int",
    interpolator: "string",
    start_delay: "int"
  },
  aspect: {
    ratio*: "number"
  },
  background: [ div-background, ... ],
  border: {
    corner_radius: "int",
    corners_radius: {
      bottom-left: "int",
      bottom-right: "int",
      top-left: "int",
      top-right: "int"
    },
    has_shadow: "bool_int",
    shadow: {
      alpha: "number",
      blur: "int",
      color: "string",
      offset*: {
        x*: {
          unit: "string",
          value*: "number"
        },
        y*: {
          unit: "string",
          value*: "number"
        }
      }
    },
    stroke: {
      color*: "string",
      unit: "string",
      width: "int"
    }
  },
  column_span: "int",
  content_alignment_horizontal: "string",
  content_alignment_vertical: "string",
  disappear_actions: [
    {
      disappear_duration: "int",
      download_callbacks: {
        on_fail_actions: [
          {
            download_callbacks: div-download-callbacks,
            is_enabled: "bool_int",
            log_id*: "string",
            log_url: "string",
            menu_items: [
              {
                action: div-action,
                actions: [ div-action, ... ],
                text*: "string"
              },
              ...
            ],
            payload: "object",
            referer: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ],
        on_success_actions: [
          {
            download_callbacks: div-download-callbacks,
            is_enabled: "bool_int",
            log_id*: "string",
            log_url: "string",
            menu_items: [
              {
                action: div-action,
                actions: [ div-action, ... ],
                text*: "string"
              },
              ...
            ],
            payload: "object",
            referer: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_limit: "int",
      payload: "object",
      referer: "string",
      typed: div-action-typed,
      url: "string",
      visibility_percentage: "int"
    },
    ...
  ],
  doubletap_actions: [
    {
      download_callbacks: {
        on_fail_actions: [ div-action, ... ],
        on_success_actions: [ div-action, ... ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_url: "string",
      menu_items: [
        {
          action: div-action,
          actions: [ div-action, ... ],
          text*: "string"
        },
        ...
      ],
      payload: "object",
      referer: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  extensions: [
    {
      id*: "string",
      params: "object"
    },
    ...
  ],
  filters: [ div-filter, ... ],
  focus: {
    background: [ div-background, ... ],
    border: {
      corner_radius: "int",
      corners_radius: {
        bottom-left: "int",
        bottom-right: "int",
        top-left: "int",
        top-right: "int"
      },
      has_shadow: "bool_int",
      shadow: {
        alpha: "number",
        blur: "int",
        color: "string",
        offset*: {
          x*: {
            unit: "string",
            value*: "number"
          },
          y*: {
            unit: "string",
            value*: "number"
          }
        }
      },
      stroke: {
        color*: "string",
        unit: "string",
        width: "int"
      }
    },
    next_focus_ids: {
      down: "string",
      forward: "string",
      left: "string",
      right: "string",
      up: "string"
    },
    on_blur: [
      {
        download_callbacks: {
          on_fail_actions: [ div-action, ... ],
          on_success_actions: [ div-action, ... ]
        },
        is_enabled: "bool_int",
        log_id*: "string",
        log_url: "string",
        menu_items: [
          {
            action: div-action,
            actions: [ div-action, ... ],
            text*: "string"
          },
          ...
        ],
        payload: "object",
        referer: "string",
        target: "string",
        typed: div-action-typed,
        url: "string"
      },
      ...
    ],
    on_focus: [
      {
        download_callbacks: {
          on_fail_actions: [ div-action, ... ],
          on_success_actions: [ div-action, ... ]
        },
        is_enabled: "bool_int",
        log_id*: "string",
        log_url: "string",
        menu_items: [
          {
            action: div-action,
            actions: [ div-action, ... ],
            text*: "string"
          },
          ...
        ],
        payload: "object",
        referer: "string",
        target: "string",
        typed: div-action-typed,
        url: "string"
      },
      ...
    ]
  },
  height: div-size,
  high_priority_preview_show: "bool_int",
  id: "string",
  image_url*: "string",
  longtap_actions: [
    {
      download_callbacks: {
        on_fail_actions: [ div-action, ... ],
        on_success_actions: [ div-action, ... ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_url: "string",
      menu_items: [
        {
          action: div-action,
          actions: [ div-action, ... ],
          text*: "string"
        },
        ...
      ],
      payload: "object",
      referer: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  margins: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "string"
  },
  paddings: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "string"
  },
  placeholder_color: "string",
  preload_required: "bool_int",
  preview: "string",
  row_span: "int",
  scale: "string",
  selected_actions: [
    {
      download_callbacks: {
        on_fail_actions: [ div-action, ... ],
        on_success_actions: [ div-action, ... ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_url: "string",
      menu_items: [
        {
          action: div-action,
          actions: [ div-action, ... ],
          text*: "string"
        },
        ...
      ],
      payload: "object",
      referer: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  tint_color: "string",
  tint_mode: "string",
  tooltips: [
    {
      animation_in: {
        duration: "int",
        end_value: "number",
        interpolator: "string",
        items: [ div-animation, ... ],
        name*: "string",
        repeat: div-count,
        start_delay: "int",
        start_value: "number"
      },
      animation_out: {
        duration: "int",
        end_value: "number",
        interpolator: "string",
        items: [ div-animation, ... ],
        name*: "string",
        repeat: div-count,
        start_delay: "int",
        start_value: "number"
      },
      div*: div,
      duration: "int",
      id*: "string",
      offset: {
        x*: {
          unit: "string",
          value*: "number"
        },
        y*: {
          unit: "string",
          value*: "number"
        }
      },
      position*: "string"
    },
    ...
  ],
  transform: {
    pivot_x: div-pivot,
    pivot_y: div-pivot,
    rotation: "number"
  },
  transition_change: div-change-transition,
  transition_in: div-appearance-transition,
  transition_out: div-appearance-transition,
  transition_triggers: [ "string", ... ],
  visibility: "string",
  visibility_action: {
    download_callbacks: {
      on_fail_actions: [
        {
          download_callbacks: div-download-callbacks,
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      on_success_actions: [
        {
          download_callbacks: div-download-callbacks,
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ]
    },
    is_enabled: "bool_int",
    log_id*: "string",
    log_limit: "int",
    payload: "object",
    referer: "string",
    typed: div-action-typed,
    url: "string",
    visibility_duration: "int",
    visibility_percentage: "int"
  },
  visibility_actions: [
    {
      download_callbacks: {
        on_fail_actions: [
          {
            download_callbacks: div-download-callbacks,
            is_enabled: "bool_int",
            log_id*: "string",
            log_url: "string",
            menu_items: [
              {
                action: div-action,
                actions: [ div-action, ... ],
                text*: "string"
              },
              ...
            ],
            payload: "object",
            referer: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ],
        on_success_actions: [
          {
            download_callbacks: div-download-callbacks,
            is_enabled: "bool_int",
            log_id*: "string",
            log_url: "string",
            menu_items: [
              {
                action: div-action,
                actions: [ div-action, ... ],
                text*: "string"
              },
              ...
            ],
            payload: "object",
            referer: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_limit: "int",
      payload: "object",
      referer: "string",
      typed: div-action-typed,
      url: "string",
      visibility_duration: "int",
      visibility_percentage: "int"
    },
    ...
  ],
  width: div-size
}

Parameters

ParametersDescription
accessibility

object

Accessibility settings.

The value has the type div-accessibility.

action

object

One action when clicking on an element. Not used if the actions parameter is set.

The value has the type div-action.

action_animation

object

Click animation. The web only supports the following values: fade, scale, native, no_animation and set.

The value has the type div-animation.

Default value: {"name": "fade", "start_value": 1, "end_value": 0.6, "duration": 100 }.

actions

array

Multiple actions when clicking on an element.

An array must not be empty.

alignment_horizontal

string

Horizontal alignment of an element inside the parent element.

Possible values: left, center, right, start, end.

alignment_vertical

string

Vertical alignment of an element inside the parent element.

Possible values: top, center, bottom, baseline.

alpha

number

Sets transparency of the entire element: 0 — completely transparent, 1 — opaque.

Restriction for the value x: x >= 0.0 && x <= 1.0.

Default value: 1.0.

appearance_animation

object

Transparency animation when loading an image.

The value has the type div-fade-transition.

aspect

object

Fixed aspect ratio. The element's height is calculated based on the width, ignoring the height value.

The value has the type div-aspect.

background

array

Element background. It can contain multiple layers.

An array must not be empty.

border

object

Element stroke.

The value has the type div-border.

column_span

int

Merges cells in a column of the grid element.

Restriction for the value x: x >= 0.

content_alignment_horizontal

string

Horizontal image alignment.

Possible values: left, center, right, start, end.

Default value: center.

content_alignment_vertical

string

Vertical image alignment.

Possible values: top, center, bottom, baseline.

Default value: center.

disappear_actions

array

Actions when an element disappears from the screen.

An array must not be empty.

doubletap_actions

array

Action when double-clicking on an element.

An array must not be empty.

extensions

array

Extensions for additional processing of an element. The list of extensions is given in DivExtension.

An array must not be empty.

filters

array

Image filters.

An array must not be empty.

List of possible values:
  • div-blur
  • div-filter-rtl-mirror
  • focus

    object

    Parameters when focusing on an element or losing focus.

    The value has the type div-focus.

    height

    object

    Element height. For Android: if there is text in this or in a child element, specify height in sp to scale the element together with the text. To learn more about units of size measurement, see Layout inside the card.

    The value has the type div-size.

    Default value: {"type": "wrap_content"}.

    high_priority_preview_show

    bool_int

    It sets the priority of displaying the preview — the preview is decoded in the main stream and displayed as the first frame. Use the parameter carefully — it will worsen the preview display time and can worsen the application launch time.

    Default value: false.

    Available platforms: Android, iOS.

    id

    string

    Element ID. It must be unique within the root element. It is used as accessibilityIdentifier on iOS.

    image_url

    string

    Required parameter.

    Direct URL to an image.

    The value must be a valid URL.

    longtap_actions

    array

    Action when long-clicking an element. Doesn't work on devices that don't support touch gestures.

    An array must not be empty.

    margins

    object

    External margins from the element stroke.

    The value has the type div-edge-insets.

    paddings

    object

    Internal margins from the element stroke.

    The value has the type div-edge-insets.

    placeholder_color

    string

    Placeholder background before the image is loaded.

    Valid formats: #RGB, #ARGB, #RRGGBB, #AARRGGBB.

    Default value: #14000000.

    preload_required

    bool_int

    Background image must be loaded before the display.

    Default value: false.

    Available platforms: Android, web.

    preview

    string

    Image preview encoded in base64. It will be shown instead of placeholder_color before the image is loaded. Format data url: data:[;base64],<data>

    row_span

    int

    Merges cells in a string of the grid element.

    Restriction for the value x: x >= 0.

    scale

    string

    Image scaling:
  • fit places the entire image into the element (free space is filled with background);
  • fill scales the image to the element size and cuts off the excess.
  • Possible values: fill, no_scale, fit, stretch.

    Default value: fill.

    selected_actions

    array

    List of actions to be executed when selecting an element in pager.

    An array must not be empty.

    tint_color

    string

    New color of a contour image.

    Valid formats: #RGB, #ARGB, #RRGGBB, #AARRGGBB.

    tint_mode

    string

    Blend mode of the color specified in tint_color.

    Possible values: source_in, source_atop, darken, lighten, multiply, screen.

    Default value: source_in.

    tooltips

    array

    Tooltips linked to an element. A tooltip can be shown by div-action://show_tooltip?id=, hidden by div-action://hide_tooltip?id= where id — tooltip id.

    An array must not be empty.

    transform

    object

    Applies the passed transformation to the element. Content that doesn't fit into the original view area is cut off.

    The value has the type div-transform.

    transition_change

    object

    Change animation. It is played when the position or size of an element changes in the new layout.

    The value has the type div-change-transition.

    transition_in

    object

    Appearance animation. It is played when an element with a new ID appears. To learn more about the concept of transitions, see Animated transitions.

    The value has the type div-appearance-transition.

    transition_out

    object

    Disappearance animation. It is played when an element disappears in the new layout.

    The value has the type div-appearance-transition.

    transition_triggers

    array

    Animation starting triggers. Default value: [state_change, visibility_change].

    An array must not be empty.

    type

    string

    Required parameter.

    The value must always be image.

    visibility

    string

    Element visibility.

    Possible values: visible, invisible, gone.

    Default value: visible.

    visibility_action

    object

    Tracking visibility of a single element. Not used if the visibility_actions parameter is set.

    The value has the type div-visibility-action.

    visibility_actions

    array

    Actions when an element appears on the screen.

    An array must not be empty.

    width

    object

    Element width.

    The value has the type div-size.

    Default value: {"type": "match_parent"}.

    ParametersDescription
    accessibility

    object

    Accessibility settings.

    The value has the type div-accessibility.

    action

    object

    One action when clicking on an element. Not used if the actions parameter is set.

    The value has the type div-action.

    action_animation

    object

    Click animation. The web only supports the following values: fade, scale, native, no_animation and set.

    The value has the type div-animation.

    Default value: {"name": "fade", "start_value": 1, "end_value": 0.6, "duration": 100 }.

    actions

    array

    Multiple actions when clicking on an element.

    An array must not be empty.

    alignment_horizontal

    string

    Horizontal alignment of an element inside the parent element.

    Possible values: left, center, right, start, end.

    alignment_vertical

    string

    Vertical alignment of an element inside the parent element.

    Possible values: top, center, bottom, baseline.

    alpha

    number

    Sets transparency of the entire element: 0 — completely transparent, 1 — opaque.

    Restriction for the value x: x >= 0.0 && x <= 1.0.

    Default value: 1.0.

    appearance_animation

    object

    Transparency animation when loading an image.

    The value has the type div-fade-transition.

    aspect

    object

    Fixed aspect ratio. The element's height is calculated based on the width, ignoring the height value.

    The value has the type div-aspect.

    background

    array

    Element background. It can contain multiple layers.

    An array must not be empty.

    border

    object

    Element stroke.

    The value has the type div-border.

    column_span

    int

    Merges cells in a column of the grid element.

    Restriction for the value x: x >= 0.

    content_alignment_horizontal

    string

    Horizontal image alignment.

    Possible values: left, center, right, start, end.

    Default value: center.

    content_alignment_vertical

    string

    Vertical image alignment.

    Possible values: top, center, bottom, baseline.

    Default value: center.

    disappear_actions

    array

    Actions when an element disappears from the screen.

    An array must not be empty.

    doubletap_actions

    array

    Action when double-clicking on an element.

    An array must not be empty.

    extensions

    array

    Extensions for additional processing of an element. The list of extensions is given in DivExtension.

    An array must not be empty.

    filters

    array

    Image filters.

    An array must not be empty.

    List of possible values:
  • div-blur
  • div-filter-rtl-mirror
  • focus

    object

    Parameters when focusing on an element or losing focus.

    The value has the type div-focus.

    height

    object

    Element height. For Android: if there is text in this or in a child element, specify height in sp to scale the element together with the text. To learn more about units of size measurement, see Layout inside the card.

    The value has the type div-size.

    Default value: {"type": "wrap_content"}.

    high_priority_preview_show

    bool_int

    It sets the priority of displaying the preview — the preview is decoded in the main stream and displayed as the first frame. Use the parameter carefully — it will worsen the preview display time and can worsen the application launch time.

    Default value: false.

    Available platforms: Android, iOS.

    id

    string

    Element ID. It must be unique within the root element. It is used as accessibilityIdentifier on iOS.

    image_url

    string

    Required parameter.

    Direct URL to an image.

    The value must be a valid URL.

    longtap_actions

    array

    Action when long-clicking an element. Doesn't work on devices that don't support touch gestures.

    An array must not be empty.

    margins

    object

    External margins from the element stroke.

    The value has the type div-edge-insets.

    paddings

    object

    Internal margins from the element stroke.

    The value has the type div-edge-insets.

    placeholder_color

    string

    Placeholder background before the image is loaded.

    Valid formats: #RGB, #ARGB, #RRGGBB, #AARRGGBB.

    Default value: #14000000.

    preload_required

    bool_int

    Background image must be loaded before the display.

    Default value: false.

    Available platforms: Android, web.

    preview

    string

    Image preview encoded in base64. It will be shown instead of placeholder_color before the image is loaded. Format data url: data:[;base64],<data>

    row_span

    int

    Merges cells in a string of the grid element.

    Restriction for the value x: x >= 0.

    scale

    string

    Image scaling:
  • fit places the entire image into the element (free space is filled with background);
  • fill scales the image to the element size and cuts off the excess.
  • Possible values: fill, no_scale, fit, stretch.

    Default value: fill.

    selected_actions

    array

    List of actions to be executed when selecting an element in pager.

    An array must not be empty.

    tint_color

    string

    New color of a contour image.

    Valid formats: #RGB, #ARGB, #RRGGBB, #AARRGGBB.

    tint_mode

    string

    Blend mode of the color specified in tint_color.

    Possible values: source_in, source_atop, darken, lighten, multiply, screen.

    Default value: source_in.

    tooltips

    array

    Tooltips linked to an element. A tooltip can be shown by div-action://show_tooltip?id=, hidden by div-action://hide_tooltip?id= where id — tooltip id.

    An array must not be empty.

    transform

    object

    Applies the passed transformation to the element. Content that doesn't fit into the original view area is cut off.

    The value has the type div-transform.

    transition_change

    object

    Change animation. It is played when the position or size of an element changes in the new layout.

    The value has the type div-change-transition.

    transition_in

    object

    Appearance animation. It is played when an element with a new ID appears. To learn more about the concept of transitions, see Animated transitions.

    The value has the type div-appearance-transition.

    transition_out

    object

    Disappearance animation. It is played when an element disappears in the new layout.

    The value has the type div-appearance-transition.

    transition_triggers

    array

    Animation starting triggers. Default value: [state_change, visibility_change].

    An array must not be empty.

    type

    string

    Required parameter.

    The value must always be image.

    visibility

    string

    Element visibility.

    Possible values: visible, invisible, gone.

    Default value: visible.

    visibility_action

    object

    Tracking visibility of a single element. Not used if the visibility_actions parameter is set.

    The value has the type div-visibility-action.

    visibility_actions

    array

    Actions when an element appears on the screen.

    An array must not be empty.

    width

    object

    Element width.

    The value has the type div-size.

    Default value: {"type": "match_parent"}.