div-image

Image.

Parameters

Parameters Description
image_url

string

Required parameter.

Direct URL to an image.

The value must be a valid URL.
type

string

Required parameter.

The value must always be image.
accessibility

object

Accessibility settings.

The value has the type div-accessibility.

Available platforms: Android, iOS, web.
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 }.

Available platforms: Android, iOS, web.
actions

array

Multiple actions when clicking on an element.
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.
animators

array

Declaration of animators that change variable values over time.

Available platforms: Android, iOS.

List of possible values:

  • div-color-animator
  • div-number-animator

    		•
    appearance_animation

    object

    Transparency animation when loading an image.

    The value has the type div-fade-transition.

    Available platforms: Android, iOS, web.
    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.

    List of possible values:

  • div-linear-gradient
  • div-radial-gradient
  • div-image-background
  • div-solid-background
  • div-nine-patch-background

    		•
    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.

    Available platforms: Android, iOS, web.
    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.

    Available platforms: Android, iOS, web.
    doubletap_actions

    array

    Action when double-clicking on an element.

    Available platforms: Android, iOS, web.
    extensions

    array

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

    Available platforms: Android, iOS, web.
    filters

    array

    Image filters.

    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.
    functions

    array

    User functions.

    Available platforms: iOS.
    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"}.

    List of possible values:

  • div-fixed-size
  • div-match-parent-size
  • div-wrap-content-size

    		•
    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.
    hover_end_actions

    array

    Actions performed when hovering over an element ends. Available on platforms with pointing device support (mouse, stylus, etc).

    Functionality is under development.
    hover_start_actions

    array

    Actions performed when hovering over an element. Available on platforms with pointing device support (mouse, stylus, etc).

    Functionality is under development.
    id

    string

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

    object

    Provides data on the actual size of the element.

    The value has the type div-layout-provider.

    Available platforms: Android, iOS, web.
    longtap_actions

    array

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

    Available platforms: Android, iOS, web.
    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.

    Available platforms: Android, iOS, web.
    preload_required

    bool_int

    Background image must be loaded before the display.

    Default value: false.

    Available platforms: Android, web.
    press_end_actions

    array

    Actions performed when an element is released.

    Functionality is under development.
    press_start_actions

    array

    Actions performed when an element is pressed.

    Functionality is under development.
    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>

    Available platforms: Android, iOS, web.
    reuse_id

    string

    ID for the div object structure. Used to optimize block reuse. See block reuse.

    Available platforms: Android, iOS.
    row_span

    int

    Merges cells in a string of the grid element.

    Restriction for the value x: x >= 0.

    Available platforms: Android, iOS, web.
    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.

    Available platforms: Android, iOS, web.
    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.

    Available platforms: Android, iOS, web.
    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.

    Available platforms: Android, iOS, web.
    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.

    Available platforms: Android, iOS, web.

    List of possible values:

  • div-change-set-transition
  • div-change-bounds-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.

    Available platforms: Android, iOS, web.

    List of possible values:

  • div-appearance-set-transition
  • div-fade-transition
  • div-scale-transition
  • div-slide-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.

    Available platforms: Android, iOS, web.

    List of possible values:

  • div-appearance-set-transition
  • div-fade-transition
  • div-scale-transition
  • div-slide-transition

    		•
    transition_triggers

    array

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

    An array must not be empty.

    Available platforms: Android, iOS, web.
    variable_triggers

    array

    Triggers for changing variables within an element.

    Available platforms: Android, iOS, web.
    variables

    array

    Declaration of variables that can be used within an element. Variables declared in this array can only be used within the element and its child elements.

    Available platforms: iOS, web, Android.

    List of possible values:

  • string_variable
  • number_variable
  • integer_variable
  • boolean_variable
  • color_variable
  • url_variable
  • dict_variable
  • array_variable

    		•
    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.

    Available platforms: Android, iOS, web.
    visibility_actions

    array

    Actions when an element appears on the screen.

    Available platforms: Android, iOS, web.
    width

    object

    Element width.

    The value has the type div-size.

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

    List of possible values:

  • div-fixed-size
  • div-match-parent-size
  • div-wrap-content-size

    		•
    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",
    scope_id: "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",
      scope_id: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  alignment_horizontal: "string",
  alignment_vertical: "string",
  alpha: "number",
  animators: [ div-animator, ... ],
  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: "number"
    }
  },
  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",
            scope_id: "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",
            scope_id: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_limit: "int",
      payload: "object",
      referer: "string",
      scope_id: "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",
      scope_id: "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: "number"
      }
    },
    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",
        scope_id: "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",
        scope_id: "string",
        target: "string",
        typed: div-action-typed,
        url: "string"
      },
      ...
    ]
  },
  functions: [
    {
      arguments*: [
        {
          name*: "string",
          type*: "string"
        },
        ...
      ],
      body*: "string",
      name*: "string",
      return_type*: "string"
    },
    ...
  ],
  height: div-size,
  high_priority_preview_show: "bool_int",
  hover_end_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",
      scope_id: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  hover_start_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",
      scope_id: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  id: "string",
  image_url*: "string",
  layout_provider: {
    height_variable_name: "string",
    width_variable_name: "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",
      scope_id: "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",
  press_end_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",
      scope_id: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  press_start_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",
      scope_id: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  preview: "string",
  reuse_id: "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",
      scope_id: "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", ... ],
  variable_triggers: [
    {
      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",
          scope_id: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      condition*: "bool_int",
      mode: "string"
    },
    ...
  ],
  variables: [ div-variable, ... ],
  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",
          scope_id: "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",
          scope_id: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ]
    },
    is_enabled: "bool_int",
    log_id*: "string",
    log_limit: "int",
    payload: "object",
    referer: "string",
    scope_id: "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",
            scope_id: "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",
            scope_id: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_limit: "int",
      payload: "object",
      referer: "string",
      scope_id: "string",
      typed: div-action-typed,
      url: "string",
      visibility_duration: "int",
      visibility_percentage: "int"
    },
    ...
  ],
  width: div-size
}
    Previous
    grid
    Next
    indicator