Inserting images

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

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.

Two images side-by-side

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

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": [
    "https://cdn.stocksnap.io/img-thumbs/960w/surfer-wave_3DBOYBPB3X.jpg",
    "https://cdn.stocksnap.io/img-thumbs/960w/fisherman-silhouette_UADULRRHEK.jpg",
    "https://cdn.stocksnap.io/img-thumbs/960w/old-photo_GEQ27OWZVV.jpg"
  ]
}
Copy text

You can reference a specific array element like this:

"url": {
  "type": "data.input",
  "path": "images.<Element number, starting from zero>"
}
Copy text

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

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.

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 action.open-close. The image is specified in the view property using the $ref structure. The action is performed when a Toloker presses the selected key.

Last updated: February 10, 2023