diff options
Diffstat (limited to 'exampleSite/content/posts/2013-05-22-sample-post-images.md')
| -rw-r--r-- | exampleSite/content/posts/2013-05-22-sample-post-images.md | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/exampleSite/content/posts/2013-05-22-sample-post-images.md b/exampleSite/content/posts/2013-05-22-sample-post-images.md new file mode 100644 index 0000000..7c41120 --- /dev/null +++ b/exampleSite/content/posts/2013-05-22-sample-post-images.md @@ -0,0 +1,96 @@ +--- +layout: post +title: "A Post with Images" +description: "Examples and code for displaying images in posts." +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" alt=""></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. + +```html +<figure class="half"> + <img src="/images/image-filename-1.jpg" alt=""> + <img src="/images/image-filename-2.jpg" alt=""> + <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" alt=""></a> + <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a> + <img src="http://placehold.it/600x300.jpg" alt=""> + <img src="http://placehold.it/600x300.jpg" alt=""> + <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"> + <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a> + <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a> + <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a> + <figcaption>Caption describing these three images.</figcaption> +</figure> +``` + +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=""></a> + <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a> + <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a> + <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a> + <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a> + <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a> + <figcaption>Three images.</figcaption> +</figure> + +### Alternative way + +Another way to achieve the same result is to include `gallery` Liquid template. In this case you +don't have to write any HTML tags – just copy a small block of code, adjust the parameters (see below) +and fill the block with any number of links to images. You can mix relative and external links. + +Here is the block you might want to use: + +```liquid +{% raw %}{% capture images %} + /images/abstract-10.jpg + /images/abstract-11.jpg + http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png +{% endcapture %} +{% include gallery images=images caption="Test images" cols=3 %}{% endraw %} +``` + +Parameters: + +- `caption`: Sets the caption under the gallery (see `figcaption` HTML tag above); +- `cols`: Sets the number of columns of the gallery. +Available values: [1..3]. + +It will look something like this: + +{% capture images %} + /images/abstract-10.jpg + /images/abstract-11.jpg + http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png +{% endcapture %} +{% include gallery images=images caption="Test images" cols=3 %} |