Adds support for preview images for publications (#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>

_bibliography/papers.bib

@@ -8,7 +8,8 @@
   title={Investigations on the Theory of the Brownian Movement},
   author={Einstein, Albert},
   year={1956},
-  publisher={Courier Corporation,}
+  publisher={Courier Corporation,},
+  preview={brownian-motion.gif},
 }
 
 @article{einstein1950meaning,

_config.yml

@@ -232,7 +232,7 @@ scholar:
 
   query: "@*"
 
-filtered_bibtex_keywords: [abbr, abstract, arxiv, bibtex_show, html, pdf, selected, supp, blog, code, poster, slides, website] # Filter out certain bibtex entry keywords used internally from the bib output
+filtered_bibtex_keywords: [abbr, abstract, arxiv, bibtex_show, html, pdf, selected, supp, blog, code, poster, slides, website, preview] # Filter out certain bibtex entry keywords used internally from the bib output
 
 # -----------------------------------------------------------------------------
 # Responsive WebP Images

_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;