Introducing `include gallery` feature from PR #881.4.0

2 files changed, 56 insertions, 1 deletions

diff --git a/_includes/gallery b/_includes/gallery
new file mode 100644
index 0000000..4091c84
--- /dev/null
+++ b/_includes/gallery
@@ -0,0 +1,21 @@
+{% assign images = include.images | split:" " %}
+{% assign caption = include.caption %}
+{% assign cols = include.cols %}
+
+{% case cols %}
+    {% when 1 %}
+        {% assign class = "" %}
+    {% when 2 %}
+        {% assign class = "half" %}
+    {% when 3 %}
+        {% assign class = "third" %}
+    {% else %}
+        {% assign class = "" %}
+{% endcase %}
+
+<figure {% if class != "" %}class="{{ class }}"{% endif %}>
+    {% for image in images %}
+    <a href="{{ image }}"><img src="{{ image }}" alt=""></a>
+    {% endfor %}
+    <figcaption>{{ caption }}</figcaption>
+</figure>
diff --git a/_posts/2013-05-22-sample-post-images.md b/_posts/2013-05-22-sample-post-images.md
index 67c6f30..08700a5 100644
--- a/_posts/2013-05-22-sample-post-images.md
+++ b/_posts/2013-05-22-sample-post-images.md
@@ -61,4 +61,38 @@ And you'll get something that looks like this:
 	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
 	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
 	<figcaption>Three images.</figcaption>
-</figure>
\ No newline at end of file
+</figure>
+
+### Alternative way
+
+Another way to achieve the same result is to include `gallery` Liquid template. In this case you
+don't have to write any HTML tags – just copy a small block of code, adjust the parameters (see below)
+and fill the block with any number of links to images. You can mix relative and external links.
+
+Here is the block you might want to use:
+
+{% highlight jinja %}
+{% raw %}
+{% capture images %}
+	/images/abstract-10.jpg
+	/images/abstract-11.jpg
+	http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png
+{% endcapture %}
+{% include gallery images=images caption="Test images" cols=3 %}
+{% endraw %}
+{% endhighlight %}
+
+Parameters:
+
+- `caption`: Sets the caption under the gallery (see `figcaption` HTML tag above);
+- `cols`: Sets the number of columns of the gallery.
+Available values: [1..3].
+
+It will look something like this:
+
+{% capture images %}
+	/images/abstract-10.jpg
+	/images/abstract-11.jpg
+	http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png
+{% endcapture %}
+{% include gallery images=images caption="Test images" cols=3 %}