Migrating images from the WorkAdventure website to the docs/ directory

Images belong to the docs, so they should sit next to the documentation files in the /docs directory.

docs/maps/animations.md

@@ -7,14 +7,14 @@ not overwrite existing ones) and click on the animation editor:
 
 
 <div class="px-5 card rounded d-inline-block">
-    <img class="document-img" src="https://workadventu.re/img/docs/anims/camera.png" alt="" />
+    <img class="document-img" src="images/anims/camera.png" alt="" />
 </div>
 
 You can now add all tiles that should be part of the animation via drag and drop to the "playlist" and adjust the frame duration:
 
 <div>
     <figure class="figure">
-        <img class="figure-img img-fluid rounded" src="https://workadventu.re/img/docs/anims/animation_editor.png" alt="" />
+        <img class="figure-img img-fluid rounded" src="images/anims/animation_editor.png" alt="" />
         <figcaption class="figure-caption">The tile animation editor</figcaption>
     </figure>
 </div>
@@ -24,7 +24,7 @@ You can preview animations directly in Tiled, using the "Show tile animations" o
 
 <div>
     <figure class="figure">
-        <img class="figure-img img-fluid rounded" src="https://workadventu.re/img/docs/anims/settings_show_animations.png" alt="" />
+        <img class="figure-img img-fluid rounded" src="images/anims/settings_show_animations.png" alt="" />
         <figcaption class="figure-caption">The Show Tile Animations option</figcaption>
     </figure>
 </div>

docs/maps/api-room.md

@@ -7,7 +7,7 @@ If you use group layers in your map, to reference a layer in a group you will ne
 Example :
 <div class="row">
     <div class="col">
-        <img src="https://workadventu.re/img/docs/groupLayer.png" class="figure-img img-fluid rounded" alt="" />
+        <img src="images/groupLayer.png" class="figure-img img-fluid rounded" alt="" />
     </div>
 </div>
 
@@ -28,7 +28,7 @@ Listens to the position of the current user. The event is triggered when the use
 
 <div>
     <figure class="figure">
-        <img src="https://workadventu.re/img/docs/trigger_event.png" class="figure-img img-fluid rounded" alt="" />
+        <img src="images/trigger_event.png" class="figure-img img-fluid rounded" alt="" />
         <figcaption class="figure-caption">The `zone` property, applied on a layer</figcaption>
     </figure>
 </div>
@@ -140,7 +140,7 @@ Replace the tile at the `x` and `y` coordinates in the layer named `layer` by th
 If `tile` is a string, it's not the id of the tile but the value of the property `name`.
 <div class="row">
     <div class="col">
-        <img src="https://workadventu.re/img/docs/nameIndexProperty.png" class="figure-img img-fluid rounded" alt="" />
+        <img src="images/nameIndexProperty.png" class="figure-img img-fluid rounded" alt="" />
     </div>
 </div>
 

docs/maps/api-state.md

@@ -70,7 +70,7 @@ Each object will represent a variable.
 
 <div class="row">
     <div class="col">
-        <img src="https://workadventu.re/img/docs/object_variable.png" class="figure-img img-fluid rounded" alt="" />
+        <img src="images/object_variable.png" class="figure-img img-fluid rounded" alt="" />
     </div>
 </div>
 

docs/maps/api-ui.md

@@ -9,10 +9,10 @@ You can position this popup by using a "rectangle" object in Tiled that you will
 
 <div class="row">
     <div class="col">
-        <img src="https://workadventu.re/img/docs/screen_popup_tiled.png" class="figure-img img-fluid rounded" alt="" />
+        <img src="images/screen_popup_tiled.png" class="figure-img img-fluid rounded" alt="" />
     </div>
     <div class="col">
-        <img src="https://workadventu.re/img/docs/screen_popup_in_game.png" class="figure-img img-fluid rounded" alt="" />
+        <img src="images/screen_popup_in_game.png" class="figure-img img-fluid rounded" alt="" />
     </div>
 </div>
 
@@ -85,7 +85,7 @@ WA.ui.registerMenuCommand("test", () => {
 ```
 
 <div class="col">
-    <img src="https://workadventu.re/img/docs/menu-command.png" class="figure-img img-fluid rounded" alt="" />
+    <img src="images/menu-command.png" class="figure-img img-fluid rounded" alt="" />
 </div>
 
 
@@ -103,7 +103,7 @@ WA.ui.displayActionMessage({
 Displays a message at the bottom of the screen (that will disappear when space bar is pressed).
 
 <div class="col">
-    <img src="https://workadventu.re/img/docs/trigger_message.png" class="figure-img img-fluid rounded" alt="" />
+    <img src="images/trigger_message.png" class="figure-img img-fluid rounded" alt="" />
 </div>
 
 Example:

docs/maps/scripting.md

@@ -46,7 +46,7 @@ You can put relative URLs. If your script file is next to your map, you can simp
 
 <div>
     <figure class="figure">
-        <img src="https://workadventu.re/img/docs/script_property.png" class="figure-img img-fluid rounded" alt="" />
+        <img src="images/script_property.png" class="figure-img img-fluid rounded" alt="" />
         <figcaption class="figure-caption">The script property</figcaption>
     </figure>
 </div>
@@ -72,7 +72,7 @@ In order to allow communication with WorkAdventure, you need to add an additiona
 
 <div>
     <figure class="figure">
-        <img src="https://workadventu.re/img/docs/open_website_allow_api.png" class="figure-img img-fluid rounded" alt="" />
+        <img src="images/open_website_allow_api.png" class="figure-img img-fluid rounded" alt="" />
         <figcaption class="figure-caption">The `openWebsiteAllowApi` property</figcaption>
     </figure>
 </div>

docs/maps/text.md

@@ -29,7 +29,7 @@ font that has support for a variety of accents. It renders great when used at *8
 
 <div>
     <figure class="figure">
-        <img src="https://workadventu.re/img/docs/text-object.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
+        <img src="images/text-object.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
         <figcaption class="figure-caption">The "font-family" property</figcaption>
     </figure>
 </div>

docs/maps/wa-maps.md

@@ -49,7 +49,7 @@ A few things to notice:
 
 <div>
     <figure class="figure">
-        <img src="https://workadventu.re/img/docs/tiled_screenshot_1.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
+        <img src="images/tiled_screenshot_1.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
         <figcaption class="figure-caption">"floorLayer" is compulsory</figcaption>
     </figure>
 </div>
@@ -62,21 +62,21 @@ To make a tile "collidable", you should:
 
 1.  select the relevant tileset and switch to "edit" mode:
     
-    ![](https://workadventu.re/img/docs/collides-1.png){.document-img}
+    ![](images/collides-1.png){.document-img}
     
 2.  right click on a tile of the tileset to select it:
 
-    ![](https://workadventu.re/img/docs/collides-2.png){.document-img}
+    ![](images/collides-2.png){.document-img}
     
 3.  on the left pane in the custom properties section, right click and select "Add properties":
 
-    ![](https://workadventu.re/img/docs/collides-3.png){.document-img}
+    ![](images/collides-3.png){.document-img}
 
     Please add a `collides` property. The type of the property must be **bool**.
 
 4.  finally, check the checkbox for the `collides` property:
 
-    ![](https://workadventu.re/img/docs/collides-4.png){.document-img}
+    ![](images/collides-4.png){.document-img}
 
 Repeat for every tile that should be "collidable".
 

docs/maps/website-in-map.md

@@ -11,7 +11,7 @@ To do this in Tiled:
 
 <div>
     <figure class="figure">
-        <img src="https://workadventu.re/img/docs/website_url_property.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
+        <img src="images/website_url_property.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
         <figcaption class="figure-caption">A "website" object</figcaption>
     </figure>
 </div>
@@ -34,7 +34,7 @@ to explicitly allow it, by setting an additional `allowApi` property to `true`.
 
 <div>
     <figure class="figure">
-        <img src="https://workadventu.re/img/docs/website_allowapi_property.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
+        <img src="images/website_allowapi_property.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
         <figcaption class="figure-caption">A "website" object that can communicate using the Iframe API</figcaption>
     </figure>
 </div>