websites/dennogumi.org-archive
Archived
1
0
Fork 0
Code Releases Activity

New theme and structure

Browse source
This commit is contained in:
Luca Beltrame 2015-04-26 15:25:43 +02:00
commit e4bafbb361
108 changed files with 9391 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

98
_posts/2013-05-22-sample-post-images.md Normal file
View file

@ -0,0 +1,98 @@
---
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.
{% highlight 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>
{% 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=""></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.
{% highlight 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>
{% 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=""></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:
{% highlight jinja %}
{% 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 %}
{% endhighlight %}
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 %}