hacks-guide-minimal-mistake.../_posts/2013-05-22-sample-post-images.md

60 lines
2.1 KiB
Markdown
Raw Normal View History

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
category: articles
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">
<img src="/images/image-filename-1.jpg">
<img src="/images/image-filename-2.jpg">
<figcaption>Caption describing these two 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="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>