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

1

class

1

figure

Figures (for images or video)

One Up

Two Up

Apply the

1

half

1
2
3
4
5
<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

1

third

1
2
3
4
5
6
<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:

Alternative way

Another way to achieve the same result is to include

1

gallery

Here is the block you might want to use:

1
2
3
4
5
6
{% 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: