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
One Center
Two Up
Apply the 1
half
<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
<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:
{% 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
1
figcaption
1
cols
It will look something like this:
