Merge branch 'img' into 'main'

img directive

Closes #12

See merge request larswirzenius/riki!51

1 files changed, 67 insertions, 0 deletions

diff --git a/riki.md b/riki.md
index 9ec7d8e..988777b 100644
--- a/riki.md
+++ b/riki.md
@@ -428,6 +428,13 @@ then command fails
 
 ### `img`
 
+The [ikiwiki img directive][] allow including images in the site
+source tree.
+
+[ikiwiki img directive](http://ikiwiki.info/ikiwiki/directive/img/)
+
+#### Simple image inclusion
+
 _Requirement: the `img` directive embeds an image in the generated
 HTML page._
 
@@ -447,6 +454,66 @@ then file output/index.html contains "<img src="img.jpg""
 This is a dummy JPEG image.
 ~~~
 
+#### Image size
+
+_Requirement: the `img` directive can set size._
+
+From the [ikiwiki img directive][] documentation:
+
+> `size`---The size parameter is optional, defaulting to full size.
+> You can specify only the width or the height, and the other value
+>  will be calculated based on it: "200x", "x200".
+
+~~~scenario
+given an installed riki
+given file site/index.mdwn from img-size
+given file site/a.jpg from jpeg
+given file site/b.jpg from jpeg
+given file site/c.jpg from jpeg
+when I run riki build site output
+then file output/index.html contains "<img src="a.jpg" width="100" height="200">"
+then file output/index.html contains "<img src="b.jpg" width="100">"
+then file output/index.html contains "<img src="c.jpg" height="200">"
+~~~
+
+~~~{#img-size .file .markdown}
+[[!img a.jpg size="100x200"]]]
+[[!img b.jpg size="100x"]]]
+[[!img c.jpg size="x200"]]]
+~~~
+
+#### Image attributes
+
+_Requirement: the `img` directive allows useful attributes to be set._
+
+The [ikiwiki img
+directive](http://ikiwiki.info/ikiwiki/directive/img/) allows
+arguments:
+
+> `alt`, `title`, `class`, `align`, `id`, `hspace`, and
+> `vspace`---These are passed through unchanged to the html img tag.
+
+~~~scenario
+given an installed riki
+given file site/index.mdwn from img-attr
+given file site/img.jpg from jpeg
+when I run riki build site output
+when I run cat output/index.html
+then file output/index.html contains "<img src="img.jpg""
+then file output/index.html contains "alt="halt malt""
+then file output/index.html contains "title="tightle""
+then file output/index.html contains "class="klass""
+then file output/index.html contains "align="malign""
+then file output/index.html contains "id="kid""
+then file output/index.html contains "hspace="hspc""
+then file output/index.html contains "vspace="vspc""
+~~~
+
+~~~{#img-attr .file .markdown}
+[[!img img.jpg alt="halt malt" title="tightle" class="klass" align="malign"
+   id="kid" hspace="hspc" vspace="vspc"]]]
+~~~
+
 ### `meta title`
 
 _Requirement: the `meta title` directive sets page title._