Add a useful image include

gaalcaras · Feb 19, 2017 · cb3f6ba · cb3f6ba
1 parent 09ff795
commit cb3f6ba
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -53,24 +53,23 @@ Table of contents:
     + *Supported languages* : English, French
     + Lang selector to change languages automatically added in header and footer
     + Basic SEO support for multilingual pages (sitemap and `<head>`)
-+ Add an **image thumbnail** to illustrate your posts. It's displayed both on the post list and on the post itself.
-+ Add a **summary** to your posts. It's used in the posts lists and on the post itself.
-+ **MathJax** support (loaded only on posts layouts)
-+ **Tables and footnotes** styled by default (with the `redcarpet` markdown engine)
-+ Add your name and a shortbio at the end of each post
-+ Easily add a "call to action" (links to the RSS feed and your Twitter if you gave your username in the `_config.yml` file) at the end of each post and on your homepage
-+ If you want to, **add a Creative Commons license** to your website directly from your `_config.yml` file
-+ **Sitemap** layout
-+ **About page**:
++ Posts layout allows you to:
+    + Add an **image thumbnail** and a **summary**
+    + Use mathematical notations with **MathJax** (loaded only on posts)
+    + **Tables and footnotes** styled by default (with the `redcarpet` markdown engine)
+    + Add your name and a shortbio at the end of each post
++ Easily add a "call to action" (RSS feed, Twitter, etc.) at the end of each post and on your homepage
++ **Add a Creative Commons license** to your website directly from your `_config.yml` file
++ **Sitemap** and **404 page** layout
++ Piwik tracking
++ **About page** layout:
     + Responsive two-columns layout
     + Just fill out your usernames for Twitter, Github, LinkedIn, Keybase ; contact email or personal website ; link to your curriculum vitae.
     + Academic automatically loads your Github profile picture.
 + Choose between a **navigation menu** at the top or a **short pitch** for your blog
 + Navigation menu:
     + Hide pages from the navigation menu
     + Add external links in the menu from the `_config.yml` file
-+ 404 page layout
-+ Piwik tracking
 
 ## Installation
 
@@ -310,6 +309,19 @@ layout: sitemap
 
 You now have a sitemap you can feed to the search engines.
 
+### Includes
+
+Sometimes you need to use figures and images in your posts, with detailed captions and maybe even the source of the image.
+The `image.html` allows you to do just that without all the HTML markup.
+
+```
+{% include image.html src="/assets/img/zotero-archives-numeriques/screencast.gif"
+                      caption="Notre solution en action" 
+                      desc="Screencast de capture Zotero"
+                      source="Google"
+                      href="http://google.com"%}
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/gaalcaras/academic. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

diff --git a/_includes/image.html b/_includes/image.html
@@ -0,0 +1,9 @@
+<figure>
+  <img src="{{ include.src }}" title="{{ include.caption }}" alt="{{ include.desc }}">
+  <figcaption>{{ include.caption }}{% if include.source %} @
+    {% if include.href %}<a href="{{ include.href }}">{% endif %}
+      {{ include.source }}
+      {% if include.href %}</a>{% endif %}
+    {% endif %}
+  </figcaption>
+</figure>
diff --git a/_sass/academic/_base.scss b/_sass/academic/_base.scss
@@ -75,6 +75,17 @@ h1 + h3, h1 + h4, h2 + h4 {
 //   left: calc(-20vw + 20%);
 //   vertical-align: middle;
 // }
+
+figure {
+  text-align: center;
+
+  figcaption {
+    margin-top: 5px;
+    font-style: italic;
+    @include size(vsmall);
+  }
+}
+
 img {
   vertical-align: middle;
   max-width: 100%;

diff --git a/academic.gemspec b/academic.gemspec
@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "academic"
-  spec.version       = "0.5.3"
+  spec.version       = "0.5.4"
   spec.authors       = ["gaalcaras"]
   spec.email         = ["gaby.alcaras@gmail.com"]