div-image

Image.

Parameters

Parameters	Description
`type`	string Required parameter. The value must always be `image`.
`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.
`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. 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`.
`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`.
`capture_focus_on_action`	bool If the value is: `true` - when the element action is activated, the focus will be moved to that element. That means that the accessibility focus will be moved and the virtual keyboard will be hidden, unless the target element implies its presence (e.g. `input`). `false` - when you click on an element, the focus will remain on the currently focused element. Default value: `true`.
`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.
`doubletap_actions`	array Action when double-clicking on an element.
`extensions`	array Extensions for additional processing of an element. The list of extensions is given in DivExtension.
`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.
`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`.
`hover_end_actions`	array Actions performed after hovering over an element. Available on platforms that support pointing devices (such as a mouse or stylus).
`hover_start_actions`	array Actions performed when hovering over an element. Available on platforms that support pointing devices (such as a mouse or stylus).
`id`	string Element ID. It must be unique within the root element. It is used as `accessibilityIdentifier` on iOS.
`image_url`	string Direct URL to an image. The value must be a valid URL.
`layout_provider`	object Provides data on the actual size of the element. The value has the type `div-layout-provider`.
`longtap_actions`	array Action when long-clicking an element. Doesn't work on devices that don't support touch gestures.
`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 Parameter is deprecated. Background image must be loaded before the display. Default value: `false`.
`press_end_actions`	array Actions performed after clicking/tapping an element.
`press_start_actions`	array Actions performed at the start of a click/tap on an element.
`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>`
`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`.
`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.
`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.
`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`.
`transformations`	array Array of transformations to be applied to the element in sequence. Available platforms: web. List of possible values: div-rotation-transformation div-translation-transformation
`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`. 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`. 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`. 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.
`variable_triggers`	array Triggers for changing variables within an element.
`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. List of possible values: string_variable number_variable integer_variable boolean_variable color_variable url_variable dict_variable array_variable property_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`.
`visibility_actions`	array Actions when an element appears on the screen.
`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",
    is_checked: "bool_int",
    menu: [
      {
        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"
          },
          ...
        ],
        label*: "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",
      style: div-stroke-style,
      unit: "string",
      width: "number"
    }
  },
  capture_focus_on_action: "bool",
  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",
      is_enabled: "bool_int",
      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",
        style: div-stroke-style,
        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"
      },
      background_accessibility_description: "string",
      bring_to_top_id: "string",
      close_by_tap_outside: "bool",
      div*: div,
      duration: "int",
      id*: "string",
      mode: div-tooltip-mode,
      offset: {
        x*: {
          unit: "string",
          value*: "number"
        },
        y*: {
          unit: "string",
          value*: "number"
        }
      },
      position*: "string",
      substrate_div: div,
      tap_outside_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"
        },
        ...
      ]
    },
    ...
  ],
  transform: {
    pivot_x: div-pivot,
    pivot_y: div-pivot,
    rotation: "number"
  },
  transformations: [ div-transformation, ... ],
  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
}

Was the article helpful?

div-grid

div-indicator