Add a picture

The standard templates contain links to examples of photos that the Toloker needs to provide. But you can display a sample image directly in the task.

The easiest way to do this is to use the standard Toloka component described in the Image section.

See what it looks like in the example of the “Photos of product and price tag” template

For your convenience, here is ready-made code for the “Photos of product and price tag” template with an image added to the first response button. Use it to check your own code. You can find our additions to the code by searching for the word “customization”.

Ready-made code

Editing HTML

  1. The HTML code consists of blocks describing various interface elements. Each block may contain other blocks within it. There may be several nesting levels. For example, the block with a response button description contains other blocks with input fields. Each field contains other elements, such as a title and a comment field.

    Each block looks like this:

    <div class="block_name">
    <!-- code for the block that may contain nested blocks -->
  2. Find the main block (it starts with <div class="main">). It contains several main_block blocks within it, each describing one of the buttons. For example, the “Photos of product and price tag” template has 4 response buttons, which means that its main block contains 4 main_block blocks for each of the buttons.

    Each button has a name for accessing its properties. For example, the buttons in the “Photos of product and price tag” template are named btn_ok, btn_no_price, btn_no_item, and btn_no_shop. Remember the name of the button that you are adding new fields to in the code.

    The main_content block inside main__block contains all the fields for the selected button. The description of each field is located in main__content-block.

    Find the button in main__block, then find the main__content-block field with a link to the sample image that needs to be replaced with the image itself. The link to the sample image is located in the main__ex block and looks like this:

    <div class="main__ex">
    <a href="{{texts.btn_ok.question_3.example_link_1}}" target="_blank" class="main__ex-link">Example</a>

    Replace the link with the img component so that the code looks like this:

    <div class="main__ex">
    {{img src=texts.btn_ok.question_3.example_link_1 width="200px" height="200px" class="main-ex__img"}}

    In this code, an image is added to the button with the name btn_ok. If you added an image to another button, change the name btn_ok to the right one.

    Make sure that the texts.btn_ok.question_3.example_link_1 parameter is the same as it was before replacing the link with the img component. This parameter contains the link to the image and is described as a constant in the JS code block.

Editing CSS

At the end of the CSS code block, paste the styles for images:

.main-ex__img {
border: 1px solid #eeeeee;
border-radius: 5px;
Contact support

Last updated: February 14, 2023

List of examples
Data enrichment
Field tasks
Help and support