Adds support for preview images for publications (alshedivat#730)

* Adds support for publication teaser

* Adds an example for publication teaser

* Update example publication teaser

* Update size

* change `teaser` to `preview`

* Update _config.yml

Co-authored-by: Maruan <alshedivat@users.noreply.github.com>

* Update _layouts/bib.html

Co-authored-by: Maruan <alshedivat@users.noreply.github.com>

* Update _layouts/bib.html

Co-authored-by: Maruan <alshedivat@users.noreply.github.com>

* Update _layouts/bib.html

Co-authored-by: Maruan <alshedivat@users.noreply.github.com>

* Update _sass/_base.scss

Co-authored-by: Maruan <alshedivat@users.noreply.github.com>

* Update _sass/_base.scss

Co-authored-by: Maruan <alshedivat@users.noreply.github.com>

Co-authored-by: Maruan <alshedivat@users.noreply.github.com>

_config.yml

@@ -108,8 +108,7 @@ collections:
     output: true
     permalink: /projects/:path/
 
-news_scrollable: true # adds a vertical scroll bar if there are more than 3 news items
-news_limit: 5 # leave blank to include all the news in the `_news` folder
+news_limit: 5
 
 # -----------------------------------------------------------------------------
 # Jekyll settings

_layouts/bib.html

@@ -2,8 +2,14 @@
 ---
 <!-- _layouts/bib.html -->
       <div class="row">
-        <div class="col-sm-2 abbr">
-        {%- if entry.abbr -%}
+        <div class="col-sm-2 {% if entry.preview %}preview{% else %}abbr{% endif %}">
+        {%- if entry.preview -%}
+          {% if entry.preview contains '://' -%}
+          <img class="preview z-depth-1 rounded" src="{{ entry.preview }}">
+          {%- else -%}
+          <img class="preview z-depth-1 rounded" src="{{ entry.preview | prepend: '/assets/img/publication_preview/' | relative_url }}">
+          {%- endif -%}
+        {%- elsif entry.abbr -%}
           {%- if site.data.venues[entry.abbr] -%}
           <abbr class="badge"><a href="{{site.data.venues[entry.abbr].url}}">{{entry.abbr}}</a></abbr>
           {%- else -%}

_sass/_base.scss

@@ -461,6 +461,11 @@ footer.sticky-bottom {
 
     li {
       margin-bottom: 1rem;
+      .preview {
+        width: 100%;
+        min-width: 80px;
+        max-width: 200px;
+      }
       .abbr {
         height: 2rem;
         margin-bottom: 0.5rem;