Skip to main content

Images

Images live in the images/ folder next to the pages and are referenced relatively. Each language has its own images/ folder – so screenshots can show the matching interface language.

Screenshot​

Plugin configuration: the “Notice active” toggle is highlighted

The alt text in square brackets describes what is shown. Screen readers read it out, and it appears if the image fails to load.

Image with caption​

Markdown has no captions. An italic sentence directly below the image works well:

Plugin configuration Figure 1: The toggle (1) activates the notice for all products.

Wide graphic​

Wide graphics are scaled down to the content width:

Flow from order to completion

Markers in screenshots​

Numbered markers in the image (like the 1 above) are referenced in the text:

  1. Switch on Notice active.
  2. Enter the notice text.
  3. Apply with Save.

Tips for screenshots​

  • Use PNG for screenshots, SVG for graphics and diagrams.
  • Maximum width 1600 px, show only the relevant part.
  • Do not show real customer data.
  • File names in lower case with hyphens: create-product-notice.png.