From cdcd069cfb2a203e1a060ce277fc6556bd324b29 Mon Sep 17 00:00:00 2001 From: Fabrizio Ferri Benedetti Date: Thu, 16 Oct 2025 18:11:02 +0200 Subject: [PATCH 1/3] Center images when not using 100% width --- docs/syntax/images.md | 18 ++++++++++++++++++ .../Assets/markdown/images.css | 4 ++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/docs/syntax/images.md b/docs/syntax/images.md index 97b92f01e..cc4665f2e 100644 --- a/docs/syntax/images.md +++ b/docs/syntax/images.md @@ -34,6 +34,24 @@ Or, use the `image` directive. :width: 250px ::: +### Image centering + +Images that are not full width are automatically centered within their container. This is particularly useful when you specify a width constraint: + +```markdown +:::{image} /syntax/images/apm.png +:alt: APM Logo +:width: 200px +::: +``` + +:::{image} /syntax/images/apm.png +:alt: APM Logo +:width: 200px +::: + +The image above is centered because it has a width of 200px, which is less than the full container width. + ## Screenshots Screenshots are images displayed with a box-shadow. Define a screenshot by adding the `:screenshot:` attribute to a block-level image directive. diff --git a/src/Elastic.Documentation.Site/Assets/markdown/images.css b/src/Elastic.Documentation.Site/Assets/markdown/images.css index d9c82464d..92d6fd727 100644 --- a/src/Elastic.Documentation.Site/Assets/markdown/images.css +++ b/src/Elastic.Documentation.Site/Assets/markdown/images.css @@ -3,10 +3,10 @@ a.image-reference { @apply mt-4 block align-middle; & > img { - @apply block; + @apply mx-auto block; } } - /* + /* * tailwind reset makes all images `display: block` * this resets it to `display: initial` */ From a602f020df09f8804a656ac06d5da4a863eecb4b Mon Sep 17 00:00:00 2001 From: Fabrizio Ferri Benedetti Date: Thu, 16 Oct 2025 18:52:56 +0200 Subject: [PATCH 2/3] Add exception for images in lists --- docs/syntax/images.md | 18 +++++++++++++++--- .../Assets/markdown/images.css | 4 ++++ 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/docs/syntax/images.md b/docs/syntax/images.md index cc4665f2e..60c29c03c 100644 --- a/docs/syntax/images.md +++ b/docs/syntax/images.md @@ -41,16 +41,28 @@ Images that are not full width are automatically centered within their container ```markdown :::{image} /syntax/images/apm.png :alt: APM Logo -:width: 200px +:width: 400px ::: ``` :::{image} /syntax/images/apm.png :alt: APM Logo -:width: 200px +:width: 400px ::: -The image above is centered because it has a width of 200px, which is less than the full container width. +The image above is centered because it has a width of 400px, which is less than the full container width. + +Note that images nested within other content (like lists or admonitions) are not centered: + +- First item in the list +- Second item with an image: + + :::{image} /syntax/images/apm.png + :alt: APM Logo in list + :width: 400px + ::: + +- Third item in the list ## Screenshots diff --git a/src/Elastic.Documentation.Site/Assets/markdown/images.css b/src/Elastic.Documentation.Site/Assets/markdown/images.css index 92d6fd727..62dbb4a62 100644 --- a/src/Elastic.Documentation.Site/Assets/markdown/images.css +++ b/src/Elastic.Documentation.Site/Assets/markdown/images.css @@ -6,6 +6,10 @@ @apply mx-auto block; } } + /* Override centering for images in lists */ + li a.image-reference > img { + @apply ml-0 mr-0; + } /* * tailwind reset makes all images `display: block` * this resets it to `display: initial` From f16a0cb222c998106c59e2af5c930695b20a2d43 Mon Sep 17 00:00:00 2001 From: Fabrizio Ferri Benedetti Date: Thu, 16 Oct 2025 18:56:36 +0200 Subject: [PATCH 3/3] Prettify --- docs/syntax/images.md | 25 +++++++++---------- package-lock.json | 6 +++++ .../Assets/markdown/images.css | 2 +- 3 files changed, 19 insertions(+), 14 deletions(-) create mode 100644 package-lock.json diff --git a/docs/syntax/images.md b/docs/syntax/images.md index 60c29c03c..63f765436 100644 --- a/docs/syntax/images.md +++ b/docs/syntax/images.md @@ -19,7 +19,6 @@ If a page uses an image that exists outside the folder that contains the `toc.ym ![APM](/syntax/images/apm.png) - Or, use the `image` directive. ```markdown @@ -57,10 +56,10 @@ Note that images nested within other content (like lists or admonitions) are not - First item in the list - Second item with an image: - :::{image} /syntax/images/apm.png - :alt: APM Logo in list - :width: 400px - ::: + :::{image} /syntax/images/apm.png + :alt: APM Logo in list + :width: 400px + ::: - Third item in the list @@ -69,7 +68,6 @@ Note that images nested within other content (like lists or admonitions) are not Screenshots are images displayed with a box-shadow. Define a screenshot by adding the `:screenshot:` attribute to a block-level image directive. ```markdown - :::{image} /syntax/images/apm.png :screenshot: ::: @@ -87,7 +85,6 @@ Here is the same image used inline ![Elasticsearch](/syntax/images/observability Here is the same image used inline ![Elasticsearch](/syntax/images/observability.png "elasticsearch =50%x50%") - ### Inline image titles Titles are optional making this the minimal syntax required: @@ -104,7 +101,6 @@ For inline images, the alt text always overrides any title specified in the Mark ![Elasticsearch](/syntax/images/observability.png "Different title =50%x50%") - ### Inline image sizing Image sizing is specified through the title argument. You can specify just the size without needing to provide a redundant title: @@ -129,17 +125,16 @@ If `H` is omitted `W` is used as the height as well. 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 `=`: ```markdown -![alt](img.png "=50%") -![alt](img.png "My Title =50%") +![alt](img.png "=50%") +![alt](img.png "My Title =50%") ``` - - -### SVG +### SVG ```markdown ![Elasticsearch](/syntax/images/alerts.svg) ``` + ![Elasticsearch](/syntax/images/alerts.svg) ### GIF @@ -147,6 +142,7 @@ When specifying just the size without a title, no space is required before the ` ```markdown ![Elasticsearch](/syntax/images/timeslider.gif) ``` + ![Elasticsearch](/syntax/images/timeslider.gif) ## Asciidoc syntax @@ -177,11 +173,14 @@ The image carousel directive builds upon the image directive. :::{image} images/applies.png :alt: Second image description + ### Title is optional - alt text will be used as title if not specified + ::: :::: ``` + ::::{carousel} :id: nested-carousel-example diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..c656764e9 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "docs-builder", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/src/Elastic.Documentation.Site/Assets/markdown/images.css b/src/Elastic.Documentation.Site/Assets/markdown/images.css index 62dbb4a62..e5c4e62d4 100644 --- a/src/Elastic.Documentation.Site/Assets/markdown/images.css +++ b/src/Elastic.Documentation.Site/Assets/markdown/images.css @@ -8,7 +8,7 @@ } /* Override centering for images in lists */ li a.image-reference > img { - @apply ml-0 mr-0; + @apply mr-0 ml-0; } /* * tailwind reset makes all images `display: block`