feat: implement the img directive

Sponsored-by: author

1 files changed, 49 insertions, 14 deletions

diff --git a/riki.md b/riki.md
index 4431cf0..988777b 100644
--- a/riki.md
+++ b/riki.md
@@ -428,6 +428,11 @@ 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
@@ -449,6 +454,34 @@ 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._
@@ -457,26 +490,28 @@ The [ikiwiki img
 directive](http://ikiwiki.info/ikiwiki/directive/img/) allows
 arguments:
 
-* `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".
-* `alt`, `title`, `class`, `align`, `id`, `hspace`, and
-  `vspace`---These are passed through unchanged to the html img tag.
+> `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
+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""
-~~~
-
-~~~{#img .file .markdown}
-[[!img img.jpg]]]
-~~~
-
-~~~{#jpeg .file}
-This is a dummy JPEG image.
+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`