diff --git a/_includes/gallery b/_includes/gallery new file mode 100644 index 0000000000000..4091c84db5449 --- /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 %} + +
+ {% for image in images %} + + {% endfor %} +
{{ caption }}
+
diff --git a/_posts/2013-05-22-sample-post-images.md b/_posts/2013-05-22-sample-post-images.md index 67c6f304e99b7..08700a560c1db 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:
Three images.
- \ No newline at end of file + + +### 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 %}