Skip to content

Latest commit

 

History

History
121 lines (82 loc) · 2.76 KB

images.md

File metadata and controls

121 lines (82 loc) · 2.76 KB

Images

Images include screenshots, inline images, icons, and more. Syntax for images is like the syntax for links, with the following differences:

  1. instead of link text, you provide an image description
  2. an image description starts with ![ not just [
  3. image paths must be specified as absolute paths

:::{note} If you reference an image using a relative path, it must be relative to the toc.yml or docset.yml rather than relative to the page that uses it. This typically fails to render when you run a local build, thus it's preferrable to use an absolute path, for example: /solutions/images/observability-apm-app-landing.png. :::

Block-level images

![APM](/syntax/img/apm.png)

APM

Or, use the image directive.

:::{image} /syntax/img/observability.png
:alt: Elasticsearch
:width: 250px
:::

:::{image} /syntax/img/observability.png :alt: Elasticsearch :width: 250px :::

Screenshots

Screenshots are images displayed with a box-shadow. Define a screenshot by adding the :screenshot: attribute to a block-level image directive.

:::{image} /syntax/img/apm.png
:screenshot:
:::

:::{image} /syntax/img/apm.png :screenshot: :::

Inline images

Here is the same image used inline ![Elasticsearch](/syntax/img/observability.png "elasticsearch =50%x50%")

Here is the same image used inline Elasticsearch

Inline image titles

Titles are optional making this the minimal syntax required

![Elasticsearch](/syntax/img/observability.png)

Including a title can be done by supplying it as an optional argument.

![Elasticsearch](/syntax/img/observability.png "elasticsearch")

Inline image sizing

Inline images are supplied at the end through the title argument.

This is done to maintain maximum compatibility with markdown parsers and previewers.

![alt](/syntax/img/apm.png "title =WxH")
![alt](/syntax/img/apm.png "title =W")

W and H can be either an absolute number in pixels or a number followed by % to indicate relative sizing.

If H is omitted W is used as the height as well.

![alt](/syntax/img/apm.png "title =250x330")
![alt](/syntax/img/apm.png "title =50%x40%")
![alt](/syntax/img/apm.png "title =50%")

SVG

![Elasticsearch](/syntax/img/alerts.svg)

Elasticsearch

GIF

![Elasticsearch](/syntax/img/timeslider.gif)

Elasticsearch

Asciidoc syntax

[role="screenshot"]
image::images/metrics-alert-filters-and-group.png[Metric threshold filter and group fields]
image::images/synthetics-get-started-projects.png[]