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 | 34 |
1 files changed, 17 insertions, 17 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 index 7c41120..415542b 100644 --- a/exampleSite/content/posts/2013-05-22-sample-post-images.md +++ b/exampleSite/content/posts/2013-05-22-sample-post-images.md @@ -12,8 +12,8 @@ Here are some examples of what a post with images might look like. If you want t ### 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> + <a href="//farm9.staticflickr.com/8426/7758832526_cc8f681e48_b.jpg"><img src="//farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg" alt=""></a> + <figcaption><a href="//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 @@ -31,10 +31,10 @@ Apply the `half` class like so to display two images side by side that share the 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=""> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> + <img src="//placehold.it/600x300.jpg" alt=""> + <img src="//placehold.it/600x300.jpg" alt=""> <figcaption>Two images.</figcaption> </figure> @@ -44,9 +44,9 @@ Apply the `third` class like so to display three images side by side that share ```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> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> <figcaption>Caption describing these three images.</figcaption> </figure> ``` @@ -54,12 +54,12 @@ Apply the `third` class like so to display three images side by side that share 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> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> + <a href="//placehold.it/1200x600.jpg"><img src="//placehold.it/600x300.jpg" alt=""></a> <figcaption>Three images.</figcaption> </figure> @@ -75,7 +75,7 @@ Here is the block you might want to use: {% raw %}{% capture images %} /images/abstract-10.jpg /images/abstract-11.jpg - http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png + //upload.wikimedia.org/wikipedia/en/2/24/Lenna.png {% endcapture %} {% include gallery images=images caption="Test images" cols=3 %}{% endraw %} ``` @@ -91,6 +91,6 @@ 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 + //upload.wikimedia.org/wikipedia/en/2/24/Lenna.png {% endcapture %} {% include gallery images=images caption="Test images" cols=3 %} |