Inhaltsverzeichnis

Medium sized images (width 540 pixels)
- Example with caption:
- Example without caption:
Small images (width 360 pixels)
- Example: Small image with much text
- Example: Small image with little text
Large sized images (width 720 pixels)
- Example:
Images with full width (1080 pixels)
- Example:
- Example: Image stretched with DokuWiki markup
Bordered text blocks inside the label section
- Here is an example:
Circled numbers lists
- Example:

Manual of Style: Images with a Text Block Attached

Printed instruction manuals and handbooks often contain(ed) images with text annotations or graphic markings. For a while, one could have the impression that such visualizations in manuals stood as the silver bullet for easy understanding. This has tended to change with modern media – therefore the contain(ed) –, as increasingly smartphones and tablets in portrait format and with narrower screens determine reading behaviour.

With the Zendiwiki we try to find a middle way. We have implemented a solution to on the one hand bind a text block closely to an image, on the other hand the display is responsive, i.e. it can be displayed on wide as well as on narrow screens. The solution includes a customized technical component (an extension of the WRAP plugin) in conjunction with a design proposal and other DokuWiki plugins.

One of the main goals is to make it as easy as possible for authors to use. That is why exactly four image sizes are supported for text block mapping: Images with a width of 360, 540, 720 and 1080 pixels.

There are also two other special formats for the label section: Lists with circled numbers and borders around text blocks.

Medium sized images (width 540 pixels)

Example with caption:

(Change the size of the browser window, especially towards portrait.)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Mi eget mauris pharetra et ultrices neque ornare. Tellus id interdum velit laoreet. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Lorem mollis aliquam ut porttitor. Proin nibh nisl condimentum id venenatis a condimentum vitae. Felis imperdiet proin fermentum leo. Semper quis lectus nulla at volutpat diam ut venenatis. Et ligula ullamcorper malesuada proin libero nunc consequat interdum. Vitae nunc sed velit dignissim sodales. Natoque penatibus et magnis dis parturient. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Non enim praesent elementum facilisis leo vel. Adipiscing vitae proin sagittis nisl. Nisi scelerisque eu ultrices vitae auctor eu augue ut.

First item bullet list.
Second item bullet list.
Third item bullet list.

DokuWiki Syntax using <WRAP labeled-image-medium>:

<WRAP labeled-image-medium>

<figure>

{{waterfall-540.png}}

<caption>This text is the caption [...] </caption>

</figure>

<WRAP>

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
[...]
facilisis leo vel. Adipiscing vitae proin sagittis nisl.
Nisi scelerisque eu ultrices vitae auctor eu augue ut.

  * First item bullet list.
  * Second item bullet list.
  * Third item bullet list.

Lorem ipsum dolor sit amet, [...]

</WRAP>
</WRAP>

Example without caption:

(Change the size of the browser window, especially towards portrait.)

First item bullet list.
Second item bullet list.
Third item bullet list.

Dokuwiki syntax even simpler without caption:

<WRAP labeled-image-medium>

{{waterfall-540.jpg}}

<WRAP>

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
[...]
facilisis leo vel. Adipiscing vitae proin sagittis nisl.
Nisi scelerisque eu ultrices vitae auctor eu augue ut.

  * First item bullet list.
  * Second item bullet list.
  * Third item bullet list.

Lorem ipsum dolor sit amet, [...]

</WRAP>
</WRAP>

Small images (width 360 pixels)

Example: Small image with much text

(Change the size of the browser window, especially towards portrait.)

First item bullet list.
Second item bullet list.
Third item bullet list.

First item of the list.
Second item of the list.
Third item of the list.

Example: Small image with little text

(Change the size of the browser window, especially towards portrait.)

Lorem ipsum dolor sit amet.

First item of the list. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Mi eget mauris pharetra et ultrices neque ornare. Tellus id interdum velit laoreet. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Lorem mollis aliquam ut porttitor. Proin nibh nisl condimentum id venenatis a condimentum vitae.
Second item of the list.
Third item of the list.

DokuWiki Syntax using <WRAP labeled-image-small>:

<WRAP labeled-image-small>

{{waterfall-360.png}}

<WRAP>

Lorem ipsum dolor sit amet.

  - First item of the list. [...]
  - Second item of the list.
  - Third item of the list.

</WRAP>
</WRAP>

Large sized images (width 720 pixels)

Example:

(Change the size of the browser window, especially towards portrait.)

First item bullet list.
Second item bullet list.
Third item bullet list.

DokuWiki Syntax using <WRAP labeled-image-large>:

<WRAP labeled-image-large>

<figure>

{{waterfall-540.png}}

<caption>This text is the caption [...] </caption>

</figure>

<WRAP>

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
[...]
facilisis leo vel. Adipiscing vitae proin sagittis nisl.
Nisi scelerisque eu ultrices vitae auctor eu augue ut.

  * First item bullet list.
  * Second item bullet list.
  * Third item bullet list.

Lorem ipsum dolor sit amet, [...]

</WRAP>
</WRAP>

The above example uses an image with a medium size (540 pixels wide). The special syntax „labeled-image-…“ will only scale the image to the correct size if it is larger. If the image is smaller, you can stretch it using DokuWiki's default image resizing markup, as in the following example.

Example: Image stretched with DokuWiki markup

(Change the size of the browser window, especially towards portrait.)

First item bullet list.
Second item bullet list.
Third item bullet list.

DokuWiki Syntax for a proportionally stretched image "{{image.png?720}}":

<WRAP labeled-image-large>

<figure>

{{waterfall-540.png?720}}

<caption>This text is the caption [...] </caption>

</figure>

<WRAP>

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
[...]
facilisis leo vel. Adipiscing vitae proin sagittis nisl.
Nisi scelerisque eu ultrices vitae auctor eu augue ut.

  * First item bullet list.
  * Second item bullet list.
  * Third item bullet list.

Lorem ipsum dolor sit amet, [...]

</WRAP>
</WRAP>

Images with full width (1080 pixels)

Example:

(Change the size of the browser window, especially towards portrait.)

First item bullet list.
Second item bullet list.
Third item bullet list.

DokuWiki Syntax using <WRAP labeled-image-full>:

<WRAP labeled-image-full>

<figure>

{{waterfall-540.png}}

<caption>This text is the caption [...] </caption>

</figure>

<WRAP>

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
[...]
facilisis leo vel. Adipiscing vitae proin sagittis nisl.
Nisi scelerisque eu ultrices vitae auctor eu augue ut.

  * First item bullet list.
  * Second item bullet list.
  * Third item bullet list.

Lorem ipsum dolor sit amet, [...]

</WRAP>
</WRAP>

Example: Image stretched with DokuWiki markup

(Change the size of the browser window, especially towards portrait.)

First item bullet list.
Second item bullet list.
Third item bullet list.

DokuWiki Syntax for a proportionally stretched image "{{image.png?1080}}":

<WRAP labeled-image-large>

<figure>

{{waterfall-540.png?1080}}

<caption>This text is the caption [...] </caption>

</figure>

<WRAP>

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
[...]
facilisis leo vel. Adipiscing vitae proin sagittis nisl.
Nisi scelerisque eu ultrices vitae auctor eu augue ut.

  * First item bullet list.
  * Second item bullet list.
  * Third item bullet list.

Lorem ipsum dolor sit amet, [...]

</WRAP>
</WRAP>

Bordered text blocks inside the label section

With the wrap syntax described here, the caption area of an image is bordered by default. You can change two things about it:

Add a border to individual text blocks within the label section with <WRAP border>.
Hide the border around the entire label section with <WRAP no-border>.

Here is an example:

(Change the size of the browser window, especially towards portrait.)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat mauris nunc congue nisi vitae suscipit tellus mauris.

Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Mi eget mauris pharetra et ultrices neque ornare. Tellus id interdum velit laoreet. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Lorem mollis aliquam ut porttitor. Proin nibh nisl condimentum id venenatis a condimentum vitae. Felis imperdiet proin fermentum leo. Semper quis lectus nulla at volutpat diam ut venenatis. Et ligula ullamcorper malesuada proin libero nunc consequat interdum. Vitae nunc sed velit dignissim sodales. Natoque penatibus et magnis dis parturient. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Non enim praesent elementum facilisis leo vel. Adipiscing vitae proin sagittis nisl. Nisi scelerisque eu ultrices vitae auctor eu augue ut.

First item bullet list.
Second item bullet list.
Third item bullet list.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat mauris nunc congue nisi vitae suscipit tellus mauris.

Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur.

DokuWiki Syntax using <WRAP no-border> and <WRAP border>:

<WRAP labeled-image-large>

<figure>

{{waterfall-540.png}}

<caption>This text is the caption [...] </caption>

</figure>

<WRAP no-border>

<WRAP border>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
[...]
</WRAP>

<WRAP border>
facilisis leo vel. Adipiscing vitae proin sagittis nisl.
Nisi scelerisque eu ultrices vitae auctor eu augue ut.
</WRAP>

<WRAP border>
  * First item bullet list.
  * Second item bullet list.
  * Third item bullet list.
</WRAP>

<WRAP border>
Lorem ipsum dolor sit amet, [...]
</WRAP>

</WRAP>
</WRAP>

Circled numbers lists

Zendiwiki provides a custom wrap plugin snippet to facilitate number markers in images: The circled number list. The plugin replaces the simple numbers in a numbered list with circled numbers. This makes it easier to reference corresponding markers on an image.

Example:

Wake up.
Drink coffee.
Get up
Drink more coffee.
Go to work.
Drink another coffee.

Custom DokuWiki Syntax using <WRAP circled-numbers-list>:

<WRAP circled-numbers-list>
  - Wake up.
  - Drink coffee.
  - Get up
  - Drink more coffee.
  - Go to work.
  - Drink another coffee.
</WRAP>