Inserting images

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

Note. You can add media files from your own server, Yandex.Disk, or cloud storage, such as Yandex.Cloud, Google Cloud, or Amazon AWS.

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 in the sandbox.

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 of 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 in the sandbox.

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 the sandbox.

    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 in the sandbox.

  • 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 in the sandbox.

Note. 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 in the sandbox.