steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Move gh-pages branch files into /docs and add test files

Browse Source 
- Jekyll ignore `/docs` and `/test` folders when using from root
- Update Staticman config to point to correct branch and data file location
- Replace `{{ base_path }}` references with `absolute_url` filter
- Update documentation
This commit is contained in:
Michael Rose
2016-11-03 11:52:04 -04:00
parent 8ed97862e5
commit 57a4324fa0
570 changed files with 22895 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
docs/_posts/2013-05-22-markup-more-images.md Normal file
View File

@ -0,0 +1,65 @@
---
title: "Markup: Another Post with Images"
excerpt: "Examples and code for displaying images in posts."
header:
teaser: "http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg"
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>
Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
#### Two Up
Apply the `half` class like so to display two images side by side that share the same caption.
```html
<figure class="half">
<a href="/assets/images/image-filename-1-large.jpg"><img src="/assets/images/image-filename-1.jpg"></a>
<a href="/assets/images/image-filename-2-large.jpg"><img src="/assets/images/image-filename-2.jpg"></a>
<figcaption>Caption describing these two images.</figcaption>
</figure>
```
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"></a>
<a href="http://placehold.it/1200x600.jpeg"><img src="http://placehold.it/600x300.jpg"></a>
<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.
```html
<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>
```
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>