You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/syntax/images.md
+38-9Lines changed: 38 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,7 +19,6 @@ If a page uses an image that exists outside the folder that contains the `toc.ym
19
19
20
20

21
21
22
-
23
22
Or, use the `image` directive.
24
23
25
24
```markdown
@@ -34,12 +33,41 @@ Or, use the `image` directive.
34
33
:width: 250px
35
34
:::
36
35
36
+
### Image centering
37
+
38
+
Images that are not full width are automatically centered within their container. This is particularly useful when you specify a width constraint:
39
+
40
+
```markdown
41
+
:::{image} /syntax/images/apm.png
42
+
:alt: APM Logo
43
+
:width: 400px
44
+
:::
45
+
```
46
+
47
+
:::{image} /syntax/images/apm.png
48
+
:alt: APM Logo
49
+
:width: 400px
50
+
:::
51
+
52
+
The image above is centered because it has a width of 400px, which is less than the full container width.
53
+
54
+
Note that images nested within other content (like lists or admonitions) are not centered:
55
+
56
+
- First item in the list
57
+
- Second item with an image:
58
+
59
+
:::{image} /syntax/images/apm.png
60
+
:alt: APM Logo in list
61
+
:width: 400px
62
+
:::
63
+
64
+
- Third item in the list
65
+
37
66
## Screenshots
38
67
39
68
Screenshots are images displayed with a box-shadow. Define a screenshot by adding the `:screenshot:` attribute to a block-level image directive.
40
69
41
70
```markdown
42
-
43
71
:::{image} /syntax/images/apm.png
44
72
:screenshot:
45
73
:::
@@ -57,7 +85,6 @@ Here is the same image used inline 
59
87
60
-
61
88
### Inline image titles
62
89
63
90
Titles are optional making this the minimal syntax required:
@@ -74,7 +101,6 @@ For inline images, the alt text always overrides any title specified in the Mark
74
101
75
102

76
103
77
-
78
104
### Inline image sizing
79
105
80
106
Image sizing is specified through the title argument. You can specify just the size without needing to provide a redundant title:
@@ -99,24 +125,24 @@ If `H` is omitted `W` is used as the height as well.
99
125
When specifying just the size without a title, no space is required before the `=` sign. When combining a title with sizing, a space is required before the `=`:
100
126
101
127
```markdown
102
-
 <!-- Just size, no space needed -->
103
-
 <!-- With title, space required -->
128
+
 <!-- Just size, no space needed -->
129
+
 <!-- With title, space required -->
104
130
```
105
131
106
-
107
-
108
-
### SVG
132
+
### SVG
109
133
110
134
```markdown
111
135

112
136
```
137
+
113
138

114
139
115
140
### GIF
116
141
117
142
```markdown
118
143

119
144
```
145
+
120
146

121
147
122
148
## Asciidoc syntax
@@ -147,11 +173,14 @@ The image carousel directive builds upon the image directive.
147
173
148
174
:::{image} images/applies.png
149
175
:alt: Second image description
176
+
150
177
### Title is optional - alt text will be used as title if not specified
Copy file name to clipboardExpand all lines: docs/syntax/substitutions.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ In both cases the yaml to define them is as followed:
18
18
19
19
20
20
```yaml
21
-
subs:
21
+
sub:
22
22
key: value
23
23
another-var: Another Value
24
24
```
@@ -222,7 +222,7 @@ Regular inline code (without the `{subs}` role) will not process substitutions a
222
222
223
223
## Products
224
224
225
-
Product substitutions use `products.yml` to determine what will be displayed. Use the product's key to get its display name.
225
+
Product substitutions use [`products.yml`](https://github.com/elastic/docs-builder/blob/main/config/products.yml) to determine what will be displayed. Use the product's key to get its display name.
0 commit comments