Images

Any images you want to include should be saved in a folder in your repo, and included using a path relative to the document where the image:: statement appears.

[[cat]]
.A scaredy cat
image::resources/readme/cat.jpg[Alt text]

A link to <<cat>>

Figure 1. A scaredy cat

A link to Figure 1, “A scaredy cat”.

Width and height

edit

The width and/or height of the image can be specified in pixels or as a percentage:

image::resources/readme/cat.jpg["Alt text",width=50]
image::resources/readme/cat.jpg["Alt text",width="20%"]

Alignment

edit

Images are left-aligned by default, but they can be centred or right-aligned:

image::resources/readme/cat.jpg["Alt text",width=100,align="left"]
image::resources/readme/cat.jpg["Alt text",width=100,align="right"]
image::resources/readme/cat.jpg["Alt text",width=100,align="center"]

Screenshots

edit

Screenshots get extra margins and a box-shadow:

You can activate it with:

[role="screenshot"]
image::resources/readme/screenshot.png[A screenshot example]

SVGs

edit

SVGs are also supported. Just use them like you would any other image:

image::resources/readme/example.svg[An example svg]

Which looks like:

Image links

edit

You can add relative or absoloute links to your images with the following syntax:

image:./images/dynamic-config.svg[link=configuration.html#configuration-dynamic]

Using internal link attributes is also supported, but the image must be inside the internal link syntax. It’s important to add a space on each side of the image tag. Without spaces, the image will not render.

<<configuration-dynamic, image:./images/dynamic-config.svg[] >>

« Beta, Dev, and Preview (experimental) Videos »