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

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.

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:

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:

A Post with Images

May 22, 2013

Figures (for images or video)

One Up

Two Up

Three Up

Jinlai Xu's Profile

Thoughts after 'Value Creation with Data Analytics in the Commonwealth of Virginia'

Thoughts after 'Research and Education on Ubiquitous Sensing'