Prefer vanilla Markdown for images (#532)

* Prefer vanilla Markdown for images

* Remove more style attributes

* Remove style from tutorial

* More style elimination

* Remove style from FB ads page

* Fix material asset page

content/en/shader-editor/window-layout/info-pane.md

@@ -4,8 +4,10 @@ layout: shader-editor-page.hbs
 position: 1
 ---
 
-<img loading="lazy" src="/images/shader-editor/info-pane.png" style="float: right; padding: 20px; padding-top: 0px; border: 1px black;" />
+![Info Pane][1]
 
 The Info Pane shows helpful information for the UI element currently under the mouse cursor.
 
 To hide the pane, click the pane header.
+
+[1]: /images/shader-editor/info-pane.png

content/en/shader-editor/window-layout/inspector-pane/graph-inspector.md

@@ -4,16 +4,17 @@ layout: shader-editor-page.hbs
 position: 1
 ---
 
-<img loading="lazy" src="/images/shader-editor/inspector-pane-graph.png" style="float: right; padding: 20px; padding-top: 0px;" />
+![Graph Inspector][1]
 
 The Graph Inspector is where a graph's settings are configured.
 
-To access a graph's inspector, select it in the [Assets Pane][1].
+To access a graph's inspector, select it in the [Assets Pane][2].
 
-| Control | Use |
-|---|---|
-| Name | The graph name.
-| Label | The graph descriptive text. |
-|\+ NEW MATERIAL | Create a new material from the current graph. |
+| Control         | Use                                           |
+| --------------- |---------------------------------------------- |
+| Name            | The graph name.                               |
+| Label           | The graph descriptive text.                   |
+| \+ NEW MATERIAL | Create a new material from the current graph. |
 
-[1]: /shader-editor/window-layout/assets-pane
+[1]: /images/shader-editor/inspector-pane-graph.png
+[2]: /shader-editor/window-layout/assets-pane

content/en/shader-editor/window-layout/inspector-pane/material-inspector.md

@@ -4,11 +4,11 @@ layout: shader-editor-page.hbs
 position: 3
 ---
 
-<img loading="lazy" src="/images/shader-editor/inspector-pane-material.png" style="float: right; padding: 20px; padding-top: 0px;" />
+![Material Inspector][1]
 
 The Material Inspector is where a material's settings are configured.
 
-To access a material's inspector, select it in the [Assets Pane][1].
+To access a material's inspector, select it in the [Assets Pane][2].
 
 There are three sections: Basic, Render States and Parameters.
 
@@ -20,7 +20,7 @@ There are three sections: Basic, Render States and Parameters.
 
 ### Render States
 
-- Blend Mode - The type of blend mode. See [here][2] for more details.
+- Blend Mode - The type of blend mode. See [here][3] for more details.
 - Alpha Test - (Not yet supported). Specify the alpha test value.
 - Cull Mode - Face culling mode.
 - Depth Test - Enable depth testing during rendering.
@@ -32,6 +32,6 @@ There are three sections: Basic, Render States and Parameters.
 
 The parameters section lists the parameter nodes placed on the graph. The names and types are taken from the graph nodes themselves.
 
-[1]: /shader-editor/window-layout/assets-pane
-[2]: /api/pc.Material.html#blendType
-[3]: /images/shader-editor/inspector-pane-material.png
+[1]: /images/shader-editor/inspector-pane-material.png
+[2]: /shader-editor/window-layout/assets-pane
+[3]: /api/pc.Material.html#blendType

content/en/shader-editor/window-layout/inspector-pane/node-inspector.md

@@ -4,12 +4,13 @@ layout: shader-editor-page.hbs
 position: 2
 ---
 
-<img loading="lazy" src="/images/shader-editor/inspector-pane-node.png" style="float: right; padding: 20px; padding-top: 0px;" />
+![Node Inspector][1]
 
 The Node Inspector is where a node's settings are configured.
 
-To access a node's details, select it in the [Graph Editor][6].
+To access a node's details, select it in the [Graph Editor][2].
 
 The available controls depend on the type of node selected.
 
-[6]: /shader-editor/window-layout/graph-editor
+[1]: /images/shader-editor/inspector-pane-node.png
+[2]: /shader-editor/window-layout/graph-editor

content/en/shader-editor/window-layout/inspector-pane/texture-inspector.md

@@ -4,12 +4,13 @@ layout: shader-editor-page.hbs
 position: 4
 ---
 
-<img loading="lazy" src="/images/shader-editor/inspector-pane-texture.png" style="float: right; padding: 20px; padding-top: 0px;" />
+![Texture Inspector][1]
 
 The Texture Inspector is where textures are configured.
 
-To access a texture's details, select it in the [Assets Pane][7].
+To access a texture's details, select it in the [Assets Pane][2].
 
 - Name - specify the texture's name.
 
-[7]: /shader-editor/window-layout/assets-pane
+[1]: /images/shader-editor/inspector-pane-texture.png
+[2]: /shader-editor/window-layout/assets-pane

content/en/shader-editor/window-layout/nodes-pane.md

@@ -4,7 +4,7 @@ layout: shader-editor-page.hbs
 position: 2
 ---
 
-<img loading="lazy" src="/images/shader-editor/nodes-pane.png" style="float: right; padding: 20px; padding-top: 0px;" />
+![Nodes Pane][1]
 
 The Nodes Pane lists the built-in nodes available for constructing graphs. Nodes are grouped into sub-sections by category.
 
@@ -17,6 +17,7 @@ At the top of the pane are controls for filtering the list of nodes:
 | O | Toggle to show only output nodes.
 | Filter Entry | Filter the list of nodes further by name. |
 
-For more information on using the Nodes Pane to create nodes, see the [Graph Editor][1] documentation.
+For more information on using the Nodes Pane to create nodes, see the [Graph Editor][2] documentation.
 
-[1]: /shader-editor/window-layout/graph-editor
+[1]: /images/shader-editor/nodes-pane.png
+[2]: /shader-editor/window-layout/graph-editor

content/en/tutorials/basic-materials.md

@@ -45,24 +45,27 @@ Changing the color of the material is a good start, but you'll quickly want more
 
 Download & save these sample textures:
 
-<a href="/downloads/proto_orange.png"><img loading="lazy" style="float:left;" src="/downloads/proto_orange.png" alt="Sample diffuse map texture" width="128" /></a>
-<a href="/downloads/proto_gray_n.png"><img loading="lazy" style="padding-left: 20px; margin: 0px" src="/downloads/proto_gray_n.png" alt="Sample normal map texture" width="128" /></a>
+[![Sample Diffuse Map][5]][5]
+
+[![Sample Normal Map][6]][6]
 
 Then upload them to your project by dragging the files into the Editor.
 
 Once they're uploaded it's time to assign them to texture slots on the Material. Select the Material as before and open up the Diffuse section. Drag the `proto_orange` texture from the asset panel into the empty diffuse slot. Then open the Normals section and drag the `proto_gray_n` texture into the normal map slot.
 
 You'll see something that looks a little like this:
 
-![Cube][5]
+![Cube][7]
 
 Try modifying the **Tiling** and **Offset** properties to effect the way the texture is wrapped around the cube.
 
-Take a look at the user manual section on [Physical Materials][6] for more depth on setting up materials.
+Take a look at the user manual section on [Physical Materials][8] for more depth on setting up materials.
 
 [1]: /images/tutorials/beginner/basic-materials/new-box.jpg
 [2]: /images/tutorials/beginner/basic-materials/new-material.jpg
 [3]: /images/tutorials/beginner/basic-materials/box-material.jpg
 [4]: /images/tutorials/beginner/basic-materials/diffuse-panel.jpg
-[5]: /images/tutorials/beginner/basic-materials/diffuse_normal_cube.jpg
-[6]: /user-manual/graphics/physical-rendering/physical-materials/
+[5]: /images/tutorials/beginner/basic-materials/proto_orange.png
+[6]: /images/tutorials/beginner/basic-materials/proto_gray_n.png
+[7]: /images/tutorials/beginner/basic-materials/diffuse_normal_cube.jpg
+[8]: /user-manual/graphics/physical-rendering/physical-materials/

content/en/tutorials/manipulating-entities.md

@@ -17,9 +17,7 @@ One of the most common operations you will need to perform on Entities is to cha
 
 An important part of understanding how to move and manipulate Entities is understanding local and world co-ordinate systems. The world co-ordinate systems is shared by all Entities, it has a fixed origin `(0,0,0)` and a fixed orientation - where `(0,1,0)` is up. The local co-ordinate system relative to the Entity itself. So the local origin is the Entity position, and the orientation follows the orientation of the Entity.
 
-<img loading="lazy" src="/images/tutorials/world.jpg" style="float:left;" alt="World co-ordinates" />
-<img loading="lazy" src="/images/tutorials/local.jpg" style="float:right;" alt="Local co-ordinates" />
-<div style="clear:both"></div>
+![World and Local Coordinate Systems](/images/tutorials/world-and-local.png)
 
 *World and Local co-ordinate systems*
 

content/en/user-manual/assets/materials/index.md

@@ -18,13 +18,13 @@ Materials are imported automatically when you upload a 3D model (e.g. FBX or COL
 
 You can create new materials directly from the PlayCanvas Editor interface.
 
-<img loading="lazy" src="/images/user-manual/assets/materials/create-asset-menu.jpg" width="300" />
+![Create Material][1]
 
 This creates a new material Asset and opens up the material inspector on the right-hand side of the screen.
 
 ## Selecting a Material
 
-<img loading="lazy" src="/images/user-manual/assets/materials/model-inspector-simple.jpg" style="width: 300px; float:right; padding: 20px; padding-top: 0px;" />
+![Model Inspector][2]
 
 In order to edit a material, first you must select it. This will bring up the material inspector.
 
@@ -34,39 +34,33 @@ Generally, clicking on a material preview icon will take you to the material ins
 
 ## Assigning Materials
 
-<img loading="lazy" src="/images/user-manual/assets/materials/model.png" style="width: 300px; float: right; padding: 20px; padding-top: 0px;" />
+![Model Component][3]
 
 You can modify which materials are assigned to where on a model asset or you can customize the materials of a particular Entity that has a model component.
 
 When you select an Entity with a model component you will see two buttons - Asset Materials and Entity Materials.
 
-<br style="clear:both;" />
-
-<img loading="lazy" src="/images/user-manual/assets/materials/model-inspector-free-slot.jpg" style="width: 300px; float: right; padding: 20px; padding-top: 0px;" />
+![Model Inspector Free Slot][4]
 
 Clicking on Asset Materials will select the model asset. You can also select the model asset from the asset panel. The model inspector will show the meshes of model and which material is assigned to each. You can clear a material using the X button, and click the empty slot to assign a new material.
 
 You can also drag and drop material Assets from the asset panel onto the material slot.
 
-<br style="clear:both;" />
-
 Clicking on Entity Materials will first ask you to select the mesh instance for which you want to customize the material:
 
-<img loading="lazy" src="/images/user-manual/assets/materials/select.png" style="max-width: 100%" />
+![Select Mesh Instance][5]
 
 After selecting the mesh instance a new material picker will appear in the model component:
 
-<img loading="lazy" src="/images/user-manual/assets/materials/selected.png" style="max-width: 100%" />
+![Selected Mesh Instance][6]
 
 Then you can select a different material for this particular Entity:
 
-<img loading="lazy" src="/images/user-manual/assets/materials/overridden.png" style="max-width: 100%" />
-
-<br style="clear:both;" />
+![Select Different Material][7]
 
 ## Editing a Material
 
-<img loading="lazy" src="/images/user-manual/assets/materials/material-inspector.jpg" style="width: 300px; float: right; padding: 20px; padding-top: 0px;" />
+![Material Inspector][8]
 
 Once you have a material selected you can edit its properties.
 
@@ -76,17 +70,17 @@ The Editor supports to types of material 'Shading Model', this is defined in a d
 
 The physical shading model is our most advanced shading model. This is the model for PlayCanvas's Physically Based Renderer (PBR).
 
-[Physical Material Properties][1]
+[Physical Material Properties][9]
 
 ### Phong
 
 The phong shading model is our legacy shading model. Use this for compatibility reasons.
 
-[Phong Material Properties][2]
+[Phong Material Properties][10]
 
 ## Material Maps
 
-<img loading="lazy" src="/images/user-manual/assets/materials/material-map-slot.jpg" style="width: 300px; float: right; padding: 20px; padding-top: 0px;" />
+![Material Map Slot][11]
 
 Much of editing a material involves creating and assigning textures maps to the various slots detailed on the pages above.
 
@@ -104,5 +98,14 @@ Some map slots can be a flat color instead of a texture map. Some slots also sup
 
 Some maps only require a single grayscale value e.g. 0.0 -> 1.0. In this case it is possible to select which channel of the texture to use. **RGB** means that all three channels are used. **R**, **G** or **B** means that only the red, green or blue channel will be used.
 
-[1]: /user-manual/assets/materials/physical-material
-[2]: /user-manual/assets/materials/phong-material
+[1]: /images/user-manual/assets/materials/create-asset-menu.jpg
+[2]: /images/user-manual/assets/materials/model-inspector-simple.jpg
+[3]: /images/user-manual/assets/materials/model.png
+[4]: /images/user-manual/assets/materials/model-inspector-free-slot.jpg
+[5]: /images/user-manual/assets/materials/select.png
+[6]: /images/user-manual/assets/materials/selected.png
+[7]: /images/user-manual/assets/materials/overridden.png
+[8]: /images/user-manual/assets/materials/material-inspector.jpg
+[9]: /user-manual/assets/materials/physical-material
+[10]: /user-manual/assets/materials/phong-material
+[11]: /images/user-manual/assets/materials/material-map-slot.jpg

content/en/user-manual/assets/textures/index.md

@@ -67,11 +67,11 @@ Different devices can support different texture sizes. Using [WebGL report][7] o
 
 For example, this is from a MacBook Pro 16 inch (2020) laptop with Chrome which shows support up to 16384x16384.
 
-<img loading="lazy" src="/images/user-manual/assets/textures/mac-webgl-report.png" alt="Macbook Pro WebGL report" style="width: 600px;" />
+<img loading="lazy" src="/images/user-manual/assets/textures/mac-webgl-report.png" alt="Macbook Pro WebGL report" width="600" />
 
 Whereas on a Samsung S7 mobile device, only 4096x4096 is supported.
 
-<img loading="lazy" src="/images/user-manual/assets/textures/samsung-s7-webgl-report.jpg" alt="Samsung S7 WebGL report" style="width: 600px;" />
+<img loading="lazy" src="/images/user-manual/assets/textures/samsung-s7-webgl-report.jpg" alt="Samsung S7 WebGL report" width="600" />
 
 If the engine attempts to utilize a texture that exceeds the max texture size reported by WebGL, it will resize it down to this maximum size at runtime. Note that this is only done for texture loaded from images (PNG, JPG, AVIF, WebP, GIF). Compressed textures cannot be resized at runtime and will simply fail to render if they are too large for the device.
 

content/en/user-manual/designer/assets.md

@@ -51,10 +51,10 @@ You can perform a global search for assets in your project using the Search box.
 **Tags** - To search by tags and their combinations type tags in square brackets `[ ]`. Simple query operators: AND, OR are allowed by expressing query as array of strings or other arrays with strings. Logic of query is same as for [`findByTag`][7] from `AssetsRegistry`.
 Here are some examples:
 
-`[ level-1 ]` - returns all assets that are tagged by `level-1`.
-`[ level-1, level-2 ]` - returns all assets that are tagged by `level-1 OR level-2`.
-`[ [ level-1, monster ] ]` - returns all assets that are tagged by `level-1 AND monster`. Notice extra brackets.
-`[ [ level-1, monster ], [ level-2, monster ] ]` - returns all assets that are tagged by `(level-1 AND monster) OR (level-2 AND monster)`.
+- `[ level-1 ]` - returns all assets that are tagged by `level-1`.
+- `[ level-1, level-2 ]` - returns all assets that are tagged by `level-1 OR level-2`.
+- `[ [ level-1, monster ] ]` - returns all assets that are tagged by `level-1 AND monster`. Notice extra brackets.
+- `[ [ level-1, monster ], [ level-2, monster ] ]` - returns all assets that are tagged by `(level-1 AND monster) OR (level-2 AND monster)`.
 
 ## Drag and Drop
 

content/en/user-manual/designer/hierarchy.md

@@ -4,7 +4,7 @@ layout: usermanual-page.hbs
 position: 2
 ---
 
-<img loading="lazy" src="/images/user-manual/editor/hierarchy.png" style="float: right; padding: 20px; padding-top: 0px;" />
+![Hierarchy Panel][1]
 
 The Hierarchy panel shows you a tree view of your entire Scene which is made up from a hierarchy of Entities. A Scene will always contain the Root Entity at the top of the tree. All the other Entities you see here on the right have been added by the developer.
 
@@ -33,3 +33,5 @@ You can duplicate Entities by selecting them and hitting Ctrl+D (or Cmd+D on Mac
 If you wish to paste Entities under a new parent you can select them and hit Ctrl+C (or Cmd+C on Mac) to copy them, then select the new parent and then Ctrl+V (or Cmd+V on Mac) to paste them under the selected parent. You can also use the Copy and Paste options when you right click on the selected Entities.
 
 You can also copy and paste Entities between different Scenes or even different Projects. Just follow the same steps to copy Entities and then go to the desired Scene, select the desired parent and paste the Entities. The Editor will try to match any Asset references on the pasted Entities by path in the new Project. For example, if you are copy-pasting an Entity with a Model component that references a Model Asset called `mymodel.fbx` then when you paste the Entity in the other Project, the Editor will try to find an Asset named `mymodel.fbx` in the same folder. If a matching Asset is not found it will be left as missing so that you can fix it manually.
+
+[1]: /images/user-manual/editor/hierarchy.png

content/en/user-manual/designer/inspector.md

@@ -4,7 +4,7 @@ layout: usermanual-page.hbs
 position: 3
 ---
 
-<img loading="lazy" src="/images/user-manual/editor/inspector/inspector.png" style="float: right; padding: 20px; padding-top: 0px;" width="320" />
+![Inspector Panel][1]
 
 The Inspector panel shows attribute values for the currently selected item.
 
@@ -15,11 +15,12 @@ Depending on what you have selected, you will see different inspector panels. So
 * **Material Inspector**
 * **Cubemap Inspector**
 
-Modifying these values is how you specify how your [Entity][1] behaves. For example, you can set which model to render for a Model Component, or what color a light is.
+Modifying these values is how you specify how your [Entity][2] behaves. For example, you can set which model to render for a Model Component, or what color a light is.
 
-Some attributes are simple text or numbers in which case a standard text field or slider control will be used. Other values may require a more specialized input method. For example, choosing an Asset highlights available Assets in the asset panel. Some values can be manipulated via the viewport, for example, the Translate, Rotate and Scale values can be edited by moving and Entity dragging the relevant [Gizmo][2] around in the viewport.
+Some attributes are simple text or numbers in which case a standard text field or slider control will be used. Other values may require a more specialized input method. For example, choosing an Asset highlights available Assets in the asset panel. Some values can be manipulated via the viewport, for example, the Translate, Rotate and Scale values can be edited by moving and Entity dragging the relevant [Gizmo][3] around in the viewport.
 
 When running both a game and the Editor simultaneously changes to attributes will be transmitted to Entities in the running application. An excellent way of iterating on values is to launch your game using the Play button, then place the Editor and the game tabs side by side and tweak values in the Editor as you watch and play the game.
 
-[1]: /user-manual/glossary#entity
-[2]: /user-manual/glossary#gizmo
+[1]: /images/user-manual/editor/inspector/inspector.png
+[2]: /user-manual/glossary#entity
+[3]: /user-manual/glossary#gizmo

content/en/user-manual/designer/menus-and-toolbar.md

@@ -12,8 +12,9 @@ The menu is available by clicking on the PLAYCANVAS icon and contains a complete
 
 ## Toolbar
 
-<img loading="lazy" src="/images/user-manual/editor/menus-and-toolbar/toolbar.png" style="padding-right: 20px; float: left;" width="44" />
+![Toolbar][2]
 
 The Toolbar features common commands for easy access, the most useful one of all is the Launch Button. The Launch Button starts a game instance in a separate browser tab and loads your Scene. You can then start play testing immediately. See the section on the Attribute Editor for how to edit values on a live running instance of your game.
 
 [1]: /images/user-manual/editor/menus-and-toolbar/menu.png
+[2]: /images/user-manual/editor/menus-and-toolbar/toolbar.png

content/en/user-manual/designer/settings.md

@@ -6,7 +6,7 @@ position: 7
 
 The Settings panel lets you set up various properties. It is accessed using the 'cog' button in the bottom left of the Editor (on the [Toolbar][1]).
 
-<img loading="lazy" src="/images/user-manual/editor/settings/cog.jpg" style="display: inline; vertical-align: middle;" />
+![Cog][2]
 
 ## Editor