Images

Visualizing content with screenshots, animations, and diagrams can help your readers better understand instructions and concepts.

To add an image, use the <img> element or the standard Markdown notation for images: ![]().

If the image is in the designated images directory, reference the image by its name:

![Alt Text](image.png){ width="450" }

To insert an image relative to the current topic, use a relative path:

                If the image and topic file are in the same directory:
                <img src="./image.png" alt="Alt text" width="450"/>

                If the image is in some other location:
                <img src="../myMediaDir/image.png" alt="Alt text" width="450"/>

                Or relative to the project root:
                <img src="$PROJECT_DIR$/allImages/image.png" alt="Alt text" width="450"/>
            

                If the image and topic file are in the same directory:
                ![Alt Text](./image.png){ width="450" }

                If the image is in some other location:
                ![Alt Text](../myMediaDir/image.png){ width="450" }

                Or relative to the project root:
                ![Alt Text]($PROJECT_DIR$/allImages/image.png){ width="450" }
            

To insert an image hosted somewhere on the web, specify a URL to the image file:

                <img src="https://www.jetbrains.com/company/brand/img/jetbrains_logo.png" alt="Alt text"/>
            

![Alt Text](https://www.jetbrains.com/company/brand/img/jetbrains_logo.png)

Inline and block images

Use the style attribute to render a large image in a paragraph or a small image as a separate block.

By default, Writerside renders any image larger than 32 pixels as a separate block element, even if you put it inside a paragraph:

If you want to render a large image inline, set style="inline" to indicate your intent:

Any image up to 32 pixels located in a paragraph is considered an inline image, and Writerside renders it inside the paragraph. For example:

If you want to render a small image as a separate block, set style="block" or put it outside the paragraph according to your intent, like this:

Thumbnails

By default, Writerside resizes images wider than 700 pixels to fit the maximum viewport. If an image is wide and has a lot of details, add the <thumbnail="true"> attribute to render the image as a clickable thumbnail with a plus icon that expands to its full size on click.

![Alt Text](image.png){ thumbnail="true" }

You can specify the size to make the thumbnail even smaller.

![Alt Text](image.png){ thumbnail="true" width="200" }

You can specify a different thumbnail image using the preview-src attribute:

                 <img src="image.png" alt="Alt text" thumbnail="true" preview-src="thumbnail-preview.png"/>
            

![Alt Text](image.png){ thumbnail="true" preview-src="thumbnail-preview.png" }

Animated GIFs

To insert an animated GIF, add it as a regular image:

![Alt Text](animation.gif)

Writerside recognizes the animation and renders the first frame with the Gif label on it. 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

Add the _dark.png suffix 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 designated images directory in your project.
Specify the name of the light image version in the src attribute. 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 to a Markdown topic 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 the same image multiple times in 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:

            Click the ![check icon][check]{width="16"} icon to mark an item as done.

            [check]: check-icon.png

The previous example will render as:

Click the icon to mark an item as done.

Last modified: 05 September 2024