Inserting images

This section describes how to insert one image, two images side-by-side, or an array of images.


You can add media files (audio files, videos, images) from your own server, a cloud storage like Google Cloud, Amazon AWS, or Yandex Cloud.

One image

To display an image, you need a direct link to the image and the view.image component. You can change the height, width, frame, and other parameters of the image. For more information, see the component description.

To insert an image passed in the input data, use the data.input component in the url property.

View example

Two images side-by-side

To place two images side-by-side, use the layout.side-by-side component.

View example

For a detailed analysis of the example, see Quick start.

Array of images

To get a value from a specific element in an array, use the path to specify its sequence number, starting from zero.

Let's say the input data contains an array of links to images:

"images": [

You can reference a specific array element like this:

"url": {
"type": "data.input",
"path": "images.<Element number, starting from zero>"
View example

Components for displaying a group of images

To display multiple images, you need a component that you can add your images to. To do this, you can use components that implement a list or table:

  • view.list: Lets you create a list of any elements, including images. It's good for making vertical lists.

    View example

    In horizontal mode (to do this you need to add "direction": true), the images are small because they have a restricted height and width. You can increase the image width by setting the minimum width in the minWidth property .

    View example
  • layout.columns: This component is good for displaying a small number of images in the horizontal mode. It lets you align the content vertically, like if you want to position images in the center.

    View example

This is relevant for creating an interface in Toloka for one task that uses multiple images. Consider whether you need multiple images in the same task. If not, the view.image component is enough for your task.

Many images or unknown number of images

If you don't know the size of your array with images in advance or you have so many images that the code is too large, use one of the components described above and add the helper.transform component into the items property. This component lets you convert an array of links to an array of view.image components to display them in the interface.

View example

Zooming in on an image

To zoom in on an image by pressing a shortcut key, use the plugin.hotkeys component. Specify which key triggers The image is specified in the view property using the $ref structure. The action is performed when a Toloker presses the selected key.

View example

Contact support

Last updated: February 10, 2023

Getting started
Important tips
Useful recommendations
Working with Toloka
Project analysis
Toloka settings
Task interface
Template Builder
HTML/CSS/JS editor
Help and support