mirror of
https://github.com/codeninjasuk/codeninjasuk.github.io.git
synced 2024-11-29 10:45:42 -05:00
66 lines
2.7 KiB
Markdown
66 lines
2.7 KiB
Markdown
|
---
|
||
|
|
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>
|