mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-24 11:07:14 +00:00
e711f8b839
- Cleanup _config.yml - Move navigation and author info to data files - Convert .less stylesheets to .scss - Update documentation - Include Octopress gem for new post/page creation
67 lines
No EOL
3 KiB
Markdown
67 lines
No EOL
3 KiB
Markdown
---
|
|
layout: post
|
|
title: "A Post with Images"
|
|
excerpt: "Examples and code for displaying images in posts."
|
|
categories: articles
|
|
tags: [sample-post, images, test]
|
|
comments: true
|
|
share: true
|
|
---
|
|
|
|
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" alt="image"></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.
|
|
|
|
{% highlight html %}
|
|
<figure class="half">
|
|
<img src="/images/image-filename-1.jpg" alt="image">
|
|
<img src="/images/image-filename-2.jpg" alt="image">
|
|
<figcaption>Caption describing these two images.</figcaption>
|
|
</figure>
|
|
{% endhighlight %}
|
|
|
|
And you'll get something that looks like this:
|
|
|
|
<figure class="half">
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<img src="http://placehold.it/600x300.jpg" alt="image">
|
|
<img src="http://placehold.it/600x300.jpg" alt="image">
|
|
<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.
|
|
|
|
{% highlight html %}
|
|
<figure class="third">
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<figcaption>Caption describing these three images.</figcaption>
|
|
</figure>
|
|
{% endhighlight %}
|
|
|
|
And you'll get something that looks like this:
|
|
|
|
<figure class="third">
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
|
|
<figcaption>Three images.</figcaption>
|
|
</figure> |