Документация Толоки

Вставка картинок

Обратите внимание

Документация на русском языке может быть устаревшей. Самые последние изменения доступны в документации на английском языке.

В этом разделе описано, как вставить одну картинку, две картинки рядом или массив картинок.

Примечание

Вы можете добавлять медиафайлы (аудио, видео, картинки) со своего сервера, Яндекс Диска или из облачных хранилищ, таких как Yandex Cloud, Google Cloud, Amazon AWS и т.п.

Одна картинка

Чтобы отобразить картинку, вам необходима прямая ссылка на нее и компонент view.image. Вы можете менять высоту, ширину, рамку и другие параметры картинки. Подробнее об этом в описании компонента.

Чтобы вставить картинку, переданную во входных данных, в свойстве url используйте компонент data.input.

Две картинки рядом (side-by-side)

Чтобы разместить рядом две картинки, используйте компонент layout.side-by-side.

Подробный разбор примера в разделе Быстрый старт.

Массив картинок

Чтобы получить значение из конкретного элемента массива, укажите в пути его порядковый номер, начиная с нуля.

Например, во входных данных указан массив ссылок на изображения:

{
  "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"
  ]
}

Сослаться на конкретный элемент массива можно так:

"url": {
  "type": "data.input",
  "path": "images.<Номер элемента, начиная с нуля>"
}

Компоненты для отображения группы картинок

Чтобы отобразить несколько картинок, вам необходим компонент, в который можно добавить свои изображения. Для этого могут подойти компоненты, реализующие список или таблицу:

  • view.list — позволяет сделать список любых элементов, в том числе картинок. Подходит, если надо сделать вертикальный список.

    При горизонтальном режиме (надо добавить "direction": true) картинки будут маленькие, т.к. они будут ограничены по высоте и ширине. Увеличить ширину картинки можно, задав минимальную ширину в свойстве minWidth.

  • layout.columns — этот компонент подходит для отображения небольшого количества картинок в горизонтальном режиме. В нем можно выровнять содержимое по вертикали, например, расположить картинки по центру.

Примечание

Если вы создаете интерфейс заданий в Толоке, то здесь речь идет про одно задание и отображение в нем больше одной картинки. Подумайте, надо ли вам отображать несколько картинок в одном задании? Если нет, то для вставки картинки вам достаточно компонента view.image.

Если количество картинок неизвестно или их много

Если величина массива с картинками заранее неизвестна или картинок так много, что код слишком объемный, используйте один из компонентов, описанных выше, а в свойство items добавьте компонент helper.transform. Этот компонент позволит вам преобразовать массив ссылок в массив компонентов view.image, чтобы отобразить их в интерфейсе.

Увеличение картинки

Чтобы увеличить картинку по нажатию горячей клавиши, используйте компонент plugin.hotkeys. Укажите в нем, какая клавиша вызывает действие action.open-close. Картинка указывается в свойстве view с помощью конструкции $ref. Действие вызовется при нажатии на выбранную клавишу.

В этой статье: