A Post with Images

Reading time ~1 minute

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 figure with the appropriate class. Each instance of 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.

Two Up

Apply the 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 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.

芦苇地带

## 芦苇地带 ◎杨牧那是一个寒冷的上午 在离开城市不远的芦苇地带,我站在风中想象你正穿过人群— 竟感觉我十分喜欢 这种等待,然而我对自己说 这次风中的等待将是风中最后的等待 我数着阳台里外的 盆景,揣测榕树的年代 看清晨的阳光斜打 一朵冬天的台湾菊 那时你正在穿过人群...… Continue reading

Post with a Background Image

Published on October 26, 2013

Syntax Highlighting Post

Published on August 16, 2013