Update syntax image examples to use images path (#1162)

* Update docs to use `images` path

As a convention our images are stored in a `images` directories, but our syntax instructions use `img` in the example image paths. This caused confusion for one developer so far, so I think it's worth updating our guide.

* Update image locations

* fix build errors and hints

---------

Co-authored-by: Colleen McGinnis <[email protected]>

Author: kilfoyle

docs/development/index.md

@@ -5,6 +5,3 @@ navigation_title: Development
 # Development Guide
 
 TODO write development documentation here
-
-
-![Image outside of scope](../images/great-drawing-of-new-structure.png)

docs/syntax/applies.md

@@ -67,24 +67,24 @@ Both are equivalent, note `all` just means we won't be rendering the version por
 
 ## Structured model
 
-![Applies To Model](img/applies.png)
+![Applies To Model](images/applies.png)
 
 The above model is projected to the following structured yaml.
 
 ```yaml
 ---
 applies_to:
-  stack: 
+  stack:
   deployment:
-    eck: 
-    ess: 
-    ece: 
-    self: 
+    eck:
+    ess:
+    ece:
+    self:
   serverless:
-    security: 
-    elasticsearch: 
-    observability: 
-  product: 
+    security:
+    elasticsearch:
+    observability:
+  product:
 ---
 ```
 This allows you to annotate various facets as defined in [](../migration/versioning.md)
@@ -128,7 +128,7 @@ serverless:
 product: coming 9.5, discontinued 9.7
 ```
 
-A header may be followed by an `{applies_to}` directive which will contextualize the applicability 
+A header may be followed by an `{applies_to}` directive which will contextualize the applicability
 of the section further.
 
 :::{note}
@@ -154,7 +154,7 @@ stack: ga 9.1
 
 This will allow the yaml inside the `{applies-to}` directive to be fully highlighted.
 
-## Inline Applies To 
+## Inline Applies To
 
 Inline applies to can be placed anywhere using the following syntax
 

docs/syntax/images.md

@@ -9,21 +9,21 @@ Images can be referenced from the top-level `_static` dir or a local image dir.
 ## Block-level images
 
 ```markdown
-![APM](img/apm.png)
+![APM](images/apm.png)
 ```
 
-![APM](img/apm.png)
+![APM](images/apm.png)
 
 Or, use the `image` directive.
 
 ```markdown
-:::{image} img/observability.png
+:::{image} images/observability.png
 :alt: Elasticsearch
 :width: 250px
 :::
 ```
 
-:::{image} img/observability.png
+:::{image} images/observability.png
 :alt: Elasticsearch
 :width: 250px
 :::
@@ -33,36 +33,36 @@ Or, use the `image` directive.
 Screenshots are images displayed with a box-shadow. Define a screenshot by adding the `:screenshot:` attribute to a block-level image directive.
 
 ```markdown
-:::{image} img/apm.png
+:::{image} images/apm.png
 :screenshot:
 :::
 ```
 
-:::{image} img/apm.png
+:::{image} images/apm.png
 :screenshot:
 :::
 
 ## Inline images
 
 ```markdown
-Here is the same image used inline ![Elasticsearch](img/observability.png "elasticsearch =50%x50%")
+Here is the same image used inline ![Elasticsearch](images/observability.png "elasticsearch =50%x50%")
 ```
 
-Here is the same image used inline ![Elasticsearch](img/observability.png "elasticsearch =50%x50%")
+Here is the same image used inline ![Elasticsearch](images/observability.png "elasticsearch =50%x50%")
 
 
 ### Inline image titles
 
 Titles are optional making this the minimal syntax required
 
 ```markdown
-![Elasticsearch](img/observability.png)
+![Elasticsearch](images/observability.png)
 ```
 
 Including a title can be done by supplying it as an optional argument.
 
 ```markdown
-![Elasticsearch](img/observability.png "elasticsearch")
+![Elasticsearch](images/observability.png "elasticsearch")
 ```
 
 ### Inline image sizing
@@ -92,16 +92,16 @@ If `H` is omitted `W` is used as the height as well.
 ### SVG 
 
 ```markdown
-![Elasticsearch](img/alerts.svg)
+![Elasticsearch](images/alerts.svg)
 ```
-![Elasticsearch](img/alerts.svg)
+![Elasticsearch](images/alerts.svg)
 
 ### GIF
 
 ```markdown
-![Elasticsearch](img/timeslider.gif)
+![Elasticsearch](images/timeslider.gif)
 ```
-![Elasticsearch](img/timeslider.gif)
+![Elasticsearch](images/timeslider.gif)
 
 
 ## Asciidoc syntax
@@ -113,4 +113,4 @@ image::images/metrics-alert-filters-and-group.png[Metric threshold filter and gr
 
 ```asciidoc
 image::images/synthetics-get-started-projects.png[]
-```
+```

docs/syntax/img/alerts.svg renamed to docs/syntax/images/alerts.svg

@@ -205,7 +205,7 @@ To include a paragraph of text within a list item, indent the content by four sp
 
 3. This is a list item with an image:
 
-    ![Image](./img/apm.png)
+    ![Image](./images/apm.png)
 
 4. This is a list item with an admonition:
 
@@ -229,7 +229,7 @@ To include a paragraph of text within a list item, indent the content by four sp
 
 3. This is a list item with an image:
 
-    ![Image](./img/apm.png)
+    ![Image](./images/apm.png)
 
 4. This is a list item with an admonition:
 

docs/syntax/img/annotations.png renamed to docs/syntax/images/annotations.png

@@ -353,7 +353,7 @@ Title of a page or a section. To create a heading, add number signs `#` at the b
 :::
 
 ::::{dropdown} Output
-:::{image} img/headings.png
+:::{image} images/headings.png
 :screenshot:
 :alt: Heading levels
 :width: 300px
@@ -381,12 +381,12 @@ Standard Markdown images: `[alt text]` in square brackets, followed by the image
 
 :::{dropdown} Syntax
 ```markdown
-![Bear emerging from hibernation](img/bear.png)
+![Bear emerging from hibernation](images/bear.png)
 ```
 :::
 
 :::{dropdown} Output
-![Bear emerging from hibernation](img/bear.png)
+![Bear emerging from hibernation](images/bear.png)
 :::
 
 **DOs**<br>
@@ -513,7 +513,7 @@ Page title (Markdown H1):
 
 :::{dropdown} Output
 
-![Rendered nav title](img/nav-title.png)
+![Rendered nav title](images/nav-title.png)
 
 :::