Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit2650a61

Browse files
committed
Introducinginclude gallery feature from PRmmistakes#88
1 parentb17c3bc commit2650a61

File tree

2 files changed

+56
-1
lines changed

2 files changed

+56
-1
lines changed

‎_includes/gallery‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{% assign images = include.images | split:" " %}
2+
{% assign caption = include.caption %}
3+
{% assign cols = include.cols %}
4+
5+
{% case cols %}
6+
{% when 1 %}
7+
{% assign class = "" %}
8+
{% when 2 %}
9+
{% assign class = "half" %}
10+
{% when 3 %}
11+
{% assign class = "third" %}
12+
{% else %}
13+
{% assign class = "" %}
14+
{% endcase %}
15+
16+
<figure {% if class != "" %}class="{{ class }}"{% endif %}>
17+
{% for image in images %}
18+
<a href="{{ image }}"><img src="{{ image }}" alt=""></a>
19+
{% endfor %}
20+
<figcaption>{{ caption }}</figcaption>
21+
</figure>

‎_posts/2013-05-22-sample-post-images.md‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,38 @@ And you'll get something that looks like this:
6161
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
6262
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
6363
<figcaption>Three images.</figcaption>
64-
</figure>
64+
</figure>
65+
66+
###Alternative way
67+
68+
Another way to achieve the same result is to include`gallery` Liquid template. In this case you
69+
don't have to write any HTML tags – just copy a small block of code, adjust the parameters (see below)
70+
and fill the block with any number of links to images. You can mix relative and external links.
71+
72+
Here is the block you might want to use:
73+
74+
{% highlight jinja %}
75+
{% raw %}
76+
{% capture images %}
77+
/images/abstract-10.jpg
78+
/images/abstract-11.jpg
79+
http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png
80+
{% endcapture %}
81+
{% include gallery images=images caption="Test images" cols=3 %}
82+
{% endraw %}
83+
{% endhighlight %}
84+
85+
Parameters:
86+
87+
-`caption`: Sets the caption under the gallery (see`figcaption` HTML tag above);
88+
-`cols`: Sets the number of columns of the gallery.
89+
Available values:[1..3].
90+
91+
It will look something like this:
92+
93+
{% capture images %}
94+
/images/abstract-10.jpg
95+
/images/abstract-11.jpg
96+
http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png
97+
{% endcapture %}
98+
{% include gallery images=images caption="Test images" cols=3 %}

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp