Add shortcode to show multiple images

2 files changed, 43 insertions, 2 deletions

diff --git a/README.md b/README.md
index 041aa6f..ad3c881 100644
--- a/README.md
+++ b/README.md
@@ -199,13 +199,33 @@ paginate = 10
 
 ## Shortcodes
 
-### Positional
+### fluid_imgs
+
+```
+{{< fluid_imgs
+  "class|src|alt"
+  "class|src|alt"
+  "... and so on"
+>}}
+```
+
+where each positional parameter is separated by the vertical bar (i.e., |).
+
+- `class`: specifies a Pure CSS unit class name (**required**)
+- `src`: specifies the URL of an image (**required**)
+- `alt`: specifies an alternate text for an image (optional)
+
+See [here](http://yoshiharuyamashita.com/post/hugo-shortcode-to-show-multiple-images/) for examples.
+
+### fluid_img (obsolete)
+
+#### Positional
 
 ```
 {{% fluid_img "/path/to/img" %}}
 ```
 
-### Named
+#### Named
 
 ```
 {{% fluid_img class="pure-u-1-2" src="/path/to/img" alt="img description" %}}
diff --git a/layouts/shortcodes/fluid_imgs.html b/layouts/shortcodes/fluid_imgs.html
new file mode 100644
index 0000000..f899772
--- /dev/null
+++ b/layouts/shortcodes/fluid_imgs.html
@@ -0,0 +1,21 @@
+{{ $paramCount := len .Params }}
+{{ if gt $paramCount 0 }}
+<div class="pure-g">
+{{ range $param := .Params }}
+  {{ $items := split $param "|" }}
+  {{ $itemCount := len $items }}
+  <!-- Item count must be at least 2 as
+  "class" and "src" must be specified -->
+  {{ if ge $itemCount 2 }}
+  <div class="{{ index $items 0 }}">
+    <div style="padding: 0 .2em">
+      <img
+        class="pure-img-responsive"
+        src="{{ index $items 1 }}"
+        alt="{{ if ge $itemCount 3 }}{{ index $items 2 }}{{ else }}{{ "" }}{{ end }}">
+    </div>
+  </div>
+  {{ end }}
+{{ end }}
+</div>
+{{ end }}
\ No newline at end of file