Skip to content

Images

Jump to bottom
mattrowe-opennebula edited this page Apr 16, 2026 · 7 revisions

The preferred method for adding images to the documentation is using the image.html shortcode syntax. This method allows you to modify the image size and apply various attributes. If you need to add additional functionality to the image shortcode you can edit image.html in the /layouts/shortcodes/ directory of the repository.

Formats

Images can be in JPEG, WEBP, PNG or SVG format. For screen shots, high-resolution PNGs are preferred. For system diagrams, SVG images are preferred. We recommend avoiding JPEG format to maintain image quality. If you are compressing screenshots or vector graphics, it is strongly recommended to convert to WEBP format rather than JPEG.

Syntax

The minimal syntax to invoke the image shortcode is the following:

{{% < image path="/images/path/to/image.png" > %}}

Image paths are relative to the assets/ directory and do not include the assets/ directory. If you add images, we recommend using folders inside the /assets/images directories to group images belonging to the same document or documentation category.

Mandatory:

  • Double enclosing curly brackets
  • Percent icon inside of both starting and closing brackets
  • <image ... > tag containing attributes
  • path attribute containing path to image file

Optional:

  • alt - alternative text if image is missing
  • align - alignment, e.g. "left", "right", "center"
  • width - image width as a pixel value or percentage
  • mt - upper margin (useful for keeping distance between text and images)
  • mb - lower margin (useful for keeping distance between text and images)
  • border - by default borders are applied to images, set this to "false" to avoid it
  • pathDark - path to alternative darkmode image option for darkmode documentation

The following example demonstrates how to apply sizing, centering, margin and disable borders:

{{< image path="/images/ISO/00-onepoc_architecture.svg" alt="OnePOC Architecture" align="center" width="80%" mb="20px" border="false" >}}

This next example demonstrates how to include images for the dark mode:

{{< image
  pathDark="/images/quickstart/dark/sunstone_login_page.png"
  path="/images/quickstart/light/sunstone_login_page.png"
  alt="Sunstone login" align="center" width="50%" mb="20px"
>}}

Legacy Format

The OpenNebula documentation also contains some images included using the default markdown sytax:

![image1](/images/sunstone_user_info_quotas.png)

It is recommended to alter images included using the legacy format to the shortcode format detailed above.

Clone this wiki locally