A Post with Images

Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use 

1
figure
with the appropriate 
1
class
. Each instance of 
1
figure
is auto-numbered and displayed in the caption.

Figures (for images or video)

One Up

Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr.

One Center

Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr.

Two Up

Apply the 

1
half
class like so to display two images side by side that share the same caption.

<figure class="half">
	<img src="/images/image-filename-1.jpg" alt="">
	<img src="/images/image-filename-2.jpg" alt="">
	<figcaption>Caption describing these two images.</figcaption>
</figure>

And you’ll get something that looks like this:

Two images.

Three Up

Apply the 

1
third
class like so to display three images side by side that share the same caption.

<figure class="third">
	<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>
	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
	<figcaption>Caption describing these three images.</figcaption>
</figure>

And you’ll get something that looks like this:

Three images.

Alternative way

Another way to achieve the same result is to include 

1
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:

{% 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 %}

Parameters:

  • 1
    caption
    : Sets the caption under the gallery (see 
    1
    figcaption
    HTML tag above);
  • 1
    cols
    : Sets the number of columns of the gallery. Available values: [1..3].

It will look something like this:

Test images
About the Author

Yong Tian

Yong Tian
Computer Science Master Student @ Tsinghua University
Follow @pawnty
Read More

谈高考志愿与大学专业

又一年高考填志愿随想 Continue reading

马尔可夫链蒙特卡洛

Published on June 18, 2016

频率学派和贝叶斯学派

Published on April 13, 2016