Context images docs update (#5659)

site/content/en/docs/manual/advanced/context-images.md

@@ -1,38 +1,107 @@
 ---
-title: 'Context images for 2d task'
+title: 'Context images'
 linkTitle: 'Context images'
 weight: 26
-description: 'Adding additional contextual images to a task.'
+description: 'Context images of the task'
 ---
 
-When you create a task, you can provide the images with additional contextual images.
-To do this, create a folder related_images and place a folder with a contextual image in it
-(make sure the folder has the same name as the image to which it should be tied).
-An example of the structure:
-
-- root_directory
-  - image_1_to_be_annotated.jpg
-  - image_2_to_be_annotated.jpg
-  - related_images/
-    - image_1_to_be_annotated_jpg/
-      - context_image_for_image_1.jpg
-    - image_2_to_be_annotated_jpg/
-      - context_image_for_image_2.jpg
-  - subdirectory_example/
-    - image_3_to_be_annotated.jpg
-    - related_images/
-      - image_3_to_be_annotated_jpg/
-        - context_image_for_image_3.jpg
-
-The contextual image is displayed in the upper right corner of the workspace.
-You can hide it by clicking on the corresponding button or maximize the image by clicking on it.
-
-![contex_images_1](/images/image212_mapillary_vistas.jpg)
-
-When the image is maximized, you can rotate it clockwise/counterclockwise and zoom in/out.
-You can also move the image by moving the mouse while holding down the LMB
-and zoom in/out by scrolling the mouse wheel.
-To close the image, just click the `X`.
-
-![contex_images_2](/images/image213_mapillary_vistas.jpg)
+Context images are additional images that provide
+context or additional information related to the primary image.
 
+Use them to add extra context about the object to improve the accuracy of annotation.
+
+Context images are available for 2D and 3D tasks.
+
+See:
+
+- [Folder structure](#folder-structure)
+- [Data format](#data-format)
+- [Context images](#context-images)
+
+## Folder structure
+
+To add contextual images to the task, you need to organize
+the images folder.
+
+Before uploading the archive to CVAT, do the following:
+
+1. In the folder with the images for annotation, create a folder: `related_images`.
+2. Add to the `related_images` a subfolder with the same name
+   as the primary image to which it should be linked.
+3. Place the context image(s) within the subfolder created in step 2.
+4. Add folder to the archive.
+5. [Create task](/docs/manual/basics/create_an_annotation_task/#create-a-task).
+
+## Data format
+
+Example file structure for 2D and 3D tasks:
+
+{{< tabpane >}}
+{{< tab header="2D task" >}}
+  root_directory
+    image_1_to_be_annotated.jpg
+    image_2_to_be_annotated.jpg
+    related_images/
+      image_1_to_be_annotated_jpg/
+        context_image_for_image_1.jpg
+      image_2_to_be_annotated_jpg/
+        context_image_for_image_2.jpg
+     subdirectory_example/
+        image_3_to_be_annotated.jpg
+         related_images/
+          image_3_to_be_annotated_jpg/
+             context_image_for_image_3.jpg
+{{< /tab >}}
+{{< tab header="3D task" >}}
+ root_directory
+    image_1_to_be_annotated.pcd
+    image_2_to_be_annotated.pcd
+     related_images/
+        image_1_to_be_annotated_pcd/
+           context_image_for_image_1.jpg
+        image_2_to_be_annotated_pcd/
+           context_image_for_image_2.jpg
+{{< /tab >}}
+{{< /tabpane >}}
+
+For more general information about 3D data formats,
+see [3D data formats](/docs/manual/basics/create_an_annotation_task/#data-formats-for-a-3d-task).
+
+## Context images
+
+The maximum amount of context images is twelve.
+
+By default they will be positioned on the right side of the main image.
+
+> **Note:** By default, only three context images will be visible.
+
+![contex_images_1](/images/context_img_01.jpg)
+
+When you add context images to the set, small toolbar will appear on the top of the screen, with the following elements:
+
+<!--lint disable maximum-line-length-->
+
+| Element                                        | Description                                                                                                                                                                                                                        |
+| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![contex_images_4](/images/context_img_04.jpg) | **Fit views**. Click to restore the layout to its original appearance. <p>If you've expanded any images in the layout, they will returned to their original size. <p>This won't affect the number of context images on the screen. |
+| ![contex_images_5](/images/context_img_05.jpg) | **Add new image**. Click to add context image to the layout.                                                                                                                                                                       |
+| ![contex_images_6](/images/context_img_06.jpg) | **Reload layout**. Click to reload layout to the default view. <p>Note, that this action can change the number of context images reseting them back to three.                                                                      |
+
+<!--lint enable maximum-line-length-->
+
+Each context image has the following elements:
+
+![contex_images_2](/images/context_img_02.jpg)
+
+<!--lint disable maximum-line-length-->
+
+| Element | Description                                                                                                                             |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| 1       | **Full screen**. Click to expand the context image in to the full screen mode. <p>Click again to revert context image to windowed mode. |
+| 2       | **Move context image**. Hold and move context image to the other place on the screen. <p>![contex_images_3](/images/context_img_03.gif) |
+| 3       | **Name**. Unique context image name                                                                                                     |
+| 4       | **Select context image**. Click to open a horisontal listview of all available context images. <p>Click on one to select.               |
+| 5       | **Close**. Click to remove image from context images menu.                                                         |
+| 6       | **Extend** Hold and pull to extend the image.                                                                                           |
+
+<!--lint enable maximum-line-length-->