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

Post with a Background Image

Syntax Highlighting Post

Sample Link Post