Skip to content

Commit

Permalink
Introducing include gallery feature from PR barryclark#88
Browse files Browse the repository at this point in the history
  • Loading branch information
mmistakes committed Apr 8, 2015
1 parent b17c3bc commit 2650a61
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 1 deletion.
21 changes: 21 additions & 0 deletions _includes/gallery
Original file line number Diff line number Diff line change
@@ -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>
36 changes: 35 additions & 1 deletion _posts/2013-05-22-sample-post-images.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</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 %}

0 comments on commit 2650a61

Please sign in to comment.