Add publication filter #26

archetypes/publication.md

@@ -1,17 +1,45 @@
 +++
+
+# Authors. Comma separated list, e.g. `["Bob Smith", "David Jones"]`.
+authors = [""]
+
+# Publication type.
+# Legend:
+# 0 = Uncategorized
+# 1 = Conference proceedings
+# 2 = Journal
+# 3 = Work in progress
+# 4 = Technical report
+# 5 = Book
+# 6 = Book chapter
+publication_types = ["0"]
+
+# Publication name and optional abbreviated version.
+publication = ""
+publication_short = ""
+
+# Abstract and optional shortened version.
 abstract = ""
 abstract_short = ""
-authors = [""]
+
+# Does this page contain LaTeX math? (true/false)
+math = false
+
+# Featured image (optional)
 image = ""
+
+# Featured image thumbnail (optional)
 image_preview = ""
-math = false
-publication = ""
-publication_short = ""
+
+# Is this a selected publication? (true/false)
 selected = false
+
+# Links (optional)
 url_pdf = ""
 url_code = ""
 url_dataset = ""
 url_project = ""
 url_slides = ""
 url_video = ""
+
 +++

exampleSite/config.toml

@@ -49,6 +49,21 @@ defaultContentLanguageInSubdir = false
   custom_css = []
   custom_js  = []
 
+  # Publication types.
+  #   Used to categorize publications.
+  #   The index of the publication type in the list is used as its unique numerical identifier.
+  #   The numeric ID is used in a publication's frontmatter to categorize it.
+  #   The language can be edited below.
+  #   For multi-lingual sites, copy this block to each language section at the end of this file.
+  publication_types = [
+    'Uncategorized',  # 0
+    'Conference proceedings',  # 1
+    'Journal',  # 2
+    'Work in progress',  # 3
+    'Technical report',  # 4
+    'Book',  # 5
+    'Book chapter'  # 6
+  ]
 
   # Social/Academic Networking
   #
@@ -124,6 +139,12 @@ defaultContentLanguageInSubdir = false
   url = "#contact"
   weight = 6
 
+# Taxonomies.
+[taxonomies]
+  tag = "tags"
+  category = "categories"
+  publication_type = "publication_types"
+
 # Languages
 #   Create a [languages.X] block for each language you want, where X is the language ID.
 

exampleSite/content/publication/clothing-search.md

@@ -6,6 +6,7 @@ date = "2013-07-01"
 image = ""
 image_preview = ""
 math = true
+publication_types = ["1"]
 publication = "In *International Conference on Multimedia and Expo Workshops (ICMEW)*, IEEE."
 publication_short = "In *ICMEW*"
 selected = true

exampleSite/content/publication/person-re-identification.md

@@ -6,6 +6,7 @@ date = "2015-09-01"
 image = ""
 image_preview = ""
 math = true
+publication_types = ["2"]
 publication = "In *Signal Image Technology & Internet Systems (SITIS)*, IEEE."
 publication_short = ""
 selected = false

i18n/en.yaml

@@ -60,6 +60,9 @@
 - id: publication
   translation: Publication
 
+- id: publication_type
+  translation: Type
+
 - id: date
   translation: Date
 
@@ -72,6 +75,14 @@
 - id: location
   translation: Location
 
+# Filtering
+
+- id: filter_by_type
+  translation: Filter by type
+
+- id: filter_all
+  translation: All
+
 # Project details
 
 - id: open_project_site

layouts/publication/single.html

@@ -22,6 +22,26 @@
     <h3>{{ i18n "abstract" }}</h3>
     <p class="pub-abstract" itemprop="text">{{ .Params.abstract }}</p>
 
+    {{ if (.Params.publication_types) and (ne (index .Params.publication_types 0) "0") }}
+    <div class="row">
+      <div class="col-sm-1"></div>
+      <div class="col-sm-10">
+        <div class="row">
+          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "publication_type" }}</div>
+          <div class="col-xs-12 col-sm-9">
+            {{ range $index, $pubtype := .Params.publication_types }}
+            <a href="{{ "/publication/" | relURL }}#{{ . | urlize }}">
+              {{ index $.Site.Params.publication_types (int .) }}
+            </a>
+            {{ end }}
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-1"></div>
+    </div>
+    <div class="visible-xs space-below"></div>
+    {{ end }}
+
     <div class="row">
       <div class="col-sm-1"></div>
       <div class="col-sm-10">

layouts/section/publication.html

@@ -5,31 +5,38 @@
     <div class="col-md-12">
       <h1>{{ i18n "publications" }}</h1>
 
-      {{ range .Data.Pages.GroupByDate "2006" }}
-      <div class="row" id="pub_list">
-        <div class="col-md-2">
-          <h3>{{ .Key }}</h3>
-        </div>
-        <div class="col-md-10">
-          <ul class="compact fa-ul">
+      <p>
+        {{ i18n "filter_by_type" }}:
+        <select class="pub-filters-select">
+          <option value="*">{{ i18n "filter_all" }}</option>
+          {{ range $index, $taxonomy := .Site.Taxonomies.publication_types }}
+          <option value=".pubtype-{{ (int $index) }}">
+            {{ index $.Site.Params.publication_types (int $index) }}
+          </option>
+          {{ end }}
+        </select>
+      </p>
+
+      <div id="container-publications">
+        {{ range .Pages.ByDate.Reverse }}
 
-            {{ range .Pages.ByDate.Reverse }}
-            <li>
-              <i class="fa-li fa fa-file-text-o" aria-hidden="true"
-                 style="color:#03396c;font-size:80%;padding-top:6px;"></i>
-              {{ .Title }}
-              <p>{{ partial "publication_links" (dict "content" . "is_list" 1) }}</p>
-            </li>
-            {{ end }}
+        {{ if .Params.publication_types }}
+          {{ $.Scratch.Set "pubtype" (index .Params.publication_types 0) }}
+        {{ else }}
+          {{ $.Scratch.Set "pubtype" 0 }}
+        {{ end }}
 
-          </ul>
+        <div class="grid-sizer col-md-12 isotope-item pubtype-{{ $.Scratch.Get "pubtype" }}">
+          <i class="fa fa-file-text-o" aria-hidden="true"
+             style="color:#03396c;font-size:80%;padding-top:6px; padding-right: 10px;"></i>{{ .Title }}
+          <p>{{ partial "publication_links" (dict "content" . "is_list" 1) }}</p>
         </div>
+
+        {{ end }}
       </div>
-      {{ end }}
 
     </div>
   </div>
-
 </div>
 {{ partial "footer_container.html" . }}
 {{ partial "footer.html" . }}

static/css/hugo-academic.css

@@ -491,6 +491,11 @@ article {
   padding-top: 10px;
 }
 
+#container-publications {
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
 
 /*************************************************
  * Talks

static/js/hugo-academic.js

@@ -93,10 +93,10 @@
    * Filter projects.
    * --------------------------------------------------------------------------- */
 
-  var $container = $('#container-projects');
-  $container.imagesLoaded(function () {
+  var $grid_projects = $('#container-projects');
+  $grid_projects.imagesLoaded(function () {
     // Initialize Isotope after all images have loaded.
-    $container.isotope({
+    $grid_projects.isotope({
       itemSelector: '.isotope-item',
       layoutMode: 'masonry'
     });
@@ -104,18 +104,70 @@
     // Filter items when filter link is clicked.
     $('#filters a').click(function () {
      var selector = $(this).attr('data-filter');
-     $container.isotope({filter: selector});
+      $grid_projects.isotope({filter: selector});
      $(this).removeClass('active').addClass('active').siblings().removeClass('active all');
      return false;
      });
   });
 
+  /* ---------------------------------------------------------------------------
+   * Filter publications.
+   * --------------------------------------------------------------------------- */
+
+  var $grid_pubs = $('#container-publications');
+  $grid_pubs.isotope({
+    itemSelector: '.isotope-item',
+    percentPosition: true,
+    masonry: {
+      // Use Bootstrap compatible grid layout.
+      columnWidth: '.grid-sizer'
+    }
+  });
+
+  // Bind publication filter on dropdown change.
+  $('.pub-filters-select').on( 'change', function() {
+    // Get filter value from option value.
+    var filterValue = this.value;
+    // Apply filter to Isotope.
+    $grid_pubs.isotope({ filter: filterValue });
+
+    // Set hash URL to current filter.
+    var url = $(this).val();
+    if (url.substr(0, 9) == '.pubtype-') {
+      window.location.hash = url.substr(9);
+    } else {
+      window.location.hash = '';
+    }
+  });
+
+  // Filter publications according to hash in URL.
+  function filter_publications() {
+    var urlHash = window.location.hash.replace('#','');
+    var filterValue = '*';
+
+    // Check if hash is numeric.
+    if (urlHash != '' && !isNaN(urlHash)) {
+      filterValue = '.pubtype-' + urlHash;
+    }
+
+    $('.pub-filters-select').val(filterValue);
+    $grid_pubs.isotope({ filter: filterValue });
+  }
+
   /* ---------------------------------------------------------------------------
    * On window load.
    * --------------------------------------------------------------------------- */
 
   $(window).load(function(){
 
+    // When accessing publication index, enable filtering.
+    if ($('.pub-filters-select')) {
+      filter_publications();
+
+      // Useful for changing hash manually (e.g. in development):
+      // window.addEventListener('hashchange', filter_publications, false);
+    }
+
     // Enable smooth scrolling with mouse wheel
     smoothScroll(1.3, 220);