Screenshots, diagrams, videos, and other visual elements can help your readers better understand instructions and concepts.
<img> element or the standard Markdown notation for inserting images:
To insert an image from the designated images directory, reference the image by its name:
To insert an image relative to the current topic, use a relative path:
To insert an image hosted somewhere on the web, specify a URL to the image file:
<img> element has the following attributes:
Specify the name of the file from the images directory or its subdirectories. Completion always suggests these files before any others.
You can specify the path to any image file in your project relative to the current topic file using
../. In this case, you will see helpful path completion suggestions.
You can also specify a URL to a file hosted somewhere on the web. In this case, make sure that the file is accessible from where you are going to host your documentation.
For Markdown, specify the file in the round brackets:![Alt Text](image.png)
Add alternate text for an image. This is a short description of the image, which is rendered when the image cannot be displayed, used by screen readers, and helps with search optimization.
For Markdown, put alternate text in the square brackets:![Alt Text](image.png)
Specify the image width. By default, images are rendered in their actual size or shrink to fit the viewport. The height is adjusted proportionally, unless you set it explicitly.
Specify the image height. By default, images are rendered in their actual size or shrink to fit the viewport. The width is adjusted proportionally, unless you set it explicitly.
Add a border effect to the image. For example, if a screenshot shows an area rather than an entire dialog, the background may blend in, so it is a good idea to add a border around the image. Rather than editing the image source, Writerside can add borders to your image.
noneis the default value, which does not add a border to the image.
lineadds a rectangular border along the edges of the image.
roundedadds a border with rounder corners.
GIF animations always have a border, so
noneis not applicable for them.
Override the default behavior derived from image size. Possible values are
Any image up to 32 pixels located in a paragraph is considered an inline image by default and it is rendered inside the paragraph. For example:
If you want to render a small image as a separate block, set
style="block"or put it outside of the paragraph, like this:
Writerside renders any image larger than 32 pixels as a separate block element, even if you put it inside of a paragraph:
If you want to render a large image inline, set
Render a thumbnail of the original image if it is larger than the viewport of the current component. When your reader clicks the thumbnail, it will expand to the full size image.
Set a custom preview file for the image instead of an automatically generated thumbnail.
To insert an animated GIF, add it as a regular image:
Writerside recognizes the animation and renders the first frame with the
Gif label on it. Your reader can click it to start the animation.
Light and dark theme
Documentation built and published with Writerside has a switcher in the header that lets readers choose between the light and the dark theme. If applicable, provide both the light and the dark version of every screenshot you use in documentation.
Provide images for the dark theme
_dark.pngsuffix to the name of the dark image version. For example, save images as example.png and example_dark.png.
Put both image files to the images directory in your project.
Specify the name of the light image version in the
srcattribute. For example,
<img src="example.png" alt="This image has light and dark versions"/>.
Images in Markdown
In Markdown, you can press Alt+Insert to open the Insert menu, and then select Image to insert an image. Alternatively, press Ctrl+U to open the Insert Image dialog directly.
Any image that you add in a Markdown file is marked with an icon in the gutter. Click the icon to configure the image.
In Markdown, you can use reference-style links to insert images used multiple times within a topic (such as icons). To do this, declare the image inside that topic with a reference name and reference the image by this name:
The previous example will render as:
Click the icon to mark an item as done.
<video> element to add a local video or a video from YouTube or Vimeo.
<video> element has the following attributes:
Specify the name or path to a local video file or a URL to a YouTube or Vimeo video. For YouTube, you can use both the full and the shortened link formats.
Set the width of the video element.
Set the height of the video element.
Specify a custom image for the preview. By default, YouTube videos use the thumbnail specified when the video was uploaded.
Enable the mini-player to hide all video controls except the play and pause button. This is useful for short videos used instead of animated GIFs.<video src="sample.mp4" mini-player="true" preview-src="preview-image.png"/>