2013-05-24 16:25:31 +02:00
---
layout: post
title: "A Post with Images"
2013-05-28 17:00:07 +02:00
description: "Examples and code for displaying images in posts."
2013-05-24 16:25:31 +02:00
tags: [sample post, images, test]
---
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
< figure >
< a href = "http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_b.jpg" > < img src = "http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg" > < / a >
< figcaption > < a href = "http://www.flickr.com/photos/80901381@N04/7758832526/" title = "Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr" > Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr< / a > .< / figcaption >
< / figure >
#### Two Up
Apply the `half` class like so to display two images side by side that share the same caption.
2013-05-28 15:00:43 +02:00
{% highlight html %}
2013-05-24 16:25:31 +02:00
< figure class = "half" >
2014-02-25 21:37:30 +01:00
< a href = "{{ site.url }}/images/image-filename-1-large.jpg" > < img src = "{{ site.url }}/images/image-filename-1.jpg" > < / a >
< a href = "{{ site.url }}/images/image-filename-2-large.jpg" > < img src = "{{ site.url }}/images/image-filename-2.jpg" > < / a >
< figcaption > Caption describing these two images.< / figcaption >
2013-05-24 16:25:31 +02:00
< / figure >
2013-05-28 15:00:43 +02:00
{% endhighlight %}
2013-05-24 16:25:31 +02:00
And you'll get something that looks like this:
< figure class = "half" >
2013-06-04 17:19:59 +02:00
< a href = "http://placehold.it/1200x600.jpg" > < img src = "http://placehold.it/600x300.jpg" > < / a >
< a href = "http://placehold.it/1200x600.jpg" > < img src = "http://placehold.it/600x300.jpg" > < / a >
2013-05-24 16:25:31 +02:00
< figcaption > Two images.< / figcaption >
< / figure >
#### Three Up
Apply the `third` class like so to display three images side by side that share the same caption.
2013-05-28 15:00:43 +02:00
{% highlight html %}
2013-05-24 16:25:31 +02:00
< figure class = "third" >
< img src = "/images/image-filename-1.jpg" >
< img src = "/images/image-filename-2.jpg" >
< img src = "/images/image-filename-3.jpg" >
< figcaption > Caption describing these three images.< / figcaption >
< / figure >
2013-05-28 15:00:43 +02:00
{% endhighlight %}
2013-05-24 16:25:31 +02:00
And you'll get something that looks like this:
< figure class = "third" >
< img src = "http://placehold.it/600x300.jpg" >
< img src = "http://placehold.it/600x300.jpg" >
< img src = "http://placehold.it/600x300.jpg" >
< figcaption > Three images.< / figcaption >
< / figure >