From 515bbe0ed2a706f7ea223d75f365976109b8cc46 Mon Sep 17 00:00:00 2001
From: "Open-Steps.org" <contact@open-steps.org>
Date: Fri, 13 Feb 2015 21:11:03 +0100
Subject: [PATCH] Implementing facebook galleries Improved navigator

---
 _includes/head.html                 |  2 ++
 _includes/header.html               | 15 +++++----
 _layouts/event.html                 | 47 +++++++++++++++++++----------
 _posts/2013-03-14-Scope020.markdown |  3 +-
 _posts/2013-04-11-Scope021.markdown |  3 +-
 _posts/2013-05-09-Scope022.markdown |  3 +-
 _posts/2013-06-06-Scope023.markdown |  3 +-
 _posts/2013-07-11-Scope024.markdown |  3 +-
 _posts/2013-09-12-Scope025.markdown |  3 +-
 _posts/2013-10-10-Scope026.markdown |  3 +-
 _posts/2013-11-14-Scope027.markdown |  3 +-
 _posts/2013-12-12-Scope028.markdown |  3 +-
 _posts/2014-02-13-Scope029.markdown |  3 +-
 _posts/2014-03-20-Scope030.markdown |  1 +
 _posts/2014-04-10-Scope031.markdown |  1 +
 _posts/2014-05-08-Scope032.markdown |  1 +
 _posts/2014-06-12-Scope033.markdown |  1 +
 _posts/2014-07-10-Scope034.markdown |  1 +
 _posts/2014-09-11-Scope035.markdown |  1 +
 _posts/2014-10-09-Scope036.markdown |  1 +
 _posts/2014-11-13-Scope037.markdown |  1 +
 _posts/2014-12-11-Scope038.markdown |  3 +-
 _posts/2015-01-08-Scope039.markdown |  3 +-
 bower.json                          | 47 +++++++++++++++--------------
 css/custom.css                      | 20 ++++++++++--
 index.html                          |  6 +++-
 26 files changed, 120 insertions(+), 61 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 6d70dc7b..9c9be2c3 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -11,6 +11,7 @@
  <link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="/bower_components/vegas/dist/jquery.vegas.min.css" />
  <link rel="stylesheet" type="text/css" href="/bower_components/fontawesome/css/font-awesome.min.css" />
+ <link rel="stylesheet" type="text/css" href="/bower_components/picbookjs/css/picbook.css" />
  <link rel="stylesheet" href="{{ " /css/custom.css " | prepend: site.baseurl }}">
  <link rel="stylesheet" href="{{ " /css/hover.css " | prepend: site.baseurl }}">
  <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
@@ -18,6 +19,7 @@
  <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="/bower_components/vegas/dist/jquery.vegas.min.js" type="text/javascript"></script>
+ <script src="/bower_components/picbookjs/js/picbook.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="/js/jquery.imagefill.min.js"></script>
  <script type="text/javascript" src="/js/scrollit.js-master/scrollit.min.js"></script>
  <script type="text/javascript" src="/js/custom.js"></script>
diff --git a/_includes/header.html b/_includes/header.html
index ca140ab5..e7e7b662 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -10,7 +10,8 @@
 
   <div>
    <ul class="nav navbar-nav navbar-center">
-    <li><a href="#" class="navigator-toggle"><i class="fa fa-bars"></i> Browse</a></li>
+    <li><a href="#" class="navigator-toggle"><i class="fa fa-bars"></i> Browse</a>
+    </li>
    </ul>
   </div>
 
@@ -33,16 +34,18 @@
 
 <div class="container-fluid navigator">
  <div class="row">
-  <div class="col-md-7">
+  <div class="col-md-8">
    <h4><i class="fa fa-search"></i> Browse by topic</h4>
    {% for post in site.posts %} {% assign pos = 39 | minus: post.number %} {% for topic in post.topics | split:"," %}
    <a class="topic" data-scroll-nav="{{pos}}">{{topic}}</a> {% endfor %} {% endfor %}
+   <h4><i class="fa fa-sign-in"></i> Participate</h4>
+   <p>Do you like to share your work as visual artist with our audience? Fill the form on our <a href="/call-for-talks/">
+ Call for Talks section.</a>
   </div>
   <div class="col-md-4">
-   <h4><i class="fa fa-calendar"></i> Upcoming session</h4>
    {% assign post = site.posts | first%}
-   <!-- <div class="container-fluid navigator"> -->
-   <h3>#{{post.number}}{{post.date_text}} ({{post.location}})</h3>
+   <h4><i class="fa fa-calendar"></i> {{post.date_text}} / #{{post.number}}</h4>
+    <p>Location: <a href="{{location_website}}">{{post.location}}</a></p>
    {% for topic in post.topics | split:"," %}
    <a class="topic">{{topic}}</a> {% endfor %} {% for talk in post.talks %}
    <div class="upcoming row">
@@ -56,7 +59,7 @@
     </div>
 
     <div class="upcoming-detail">
-     <h4>{{talk.artist}} / {{talk.title}}</h4>
+     <p><a href="{{talk.artist_website}}">{{talk.artist}}</a> / {{talk.title}}</p>
     </div>
 
    </div>
diff --git a/_layouts/event.html b/_layouts/event.html
index b0074328..d25832cc 100644
--- a/_layouts/event.html
+++ b/_layouts/event.html
@@ -68,26 +68,41 @@ layout: default
 
   </div>
 
-  <div class="row">
+  {% if page.fb_gallery_id %}
 
-   <div class="gallery dark_bg col-md-4 col-md-offset-3">
+   <div class="row">
 
-    <h4>Photo gallery of the event</h4>
+    <div class="gallery dark_bg col-md-7 col-md-offset-3">
 
+     <h4>Photo gallery of the event</h4>
+     <div class="picbook"></div>
+     <script type="text/javascript">
+      var picbook = new picbookJs({
+      limit: 100,
+      albumId: '{{page.fb_gallery_id}}'
+      });
+     </script>
+    </div>
    </div>
 
-   <div class="nav_bottom dark_bg col-md-2 col-md-offset-1">
-
-    <h4>Discover more</h4>
-
-    {% if page.previous %}
-    <a class="button hvr-sweep-to-top" href={{page.previous.url | prepend: site.baseurl }}>{{page.previous.title}}</a> {% endif %} {% if page.next %}
-    <a class="button hvr-sweep-to-top" href={{page.next.url | prepend: site.baseurl }}>{{page.next.title}}</a> {% endif %}
-
-   </div>
-
-  </div>
-
- </article>
+  {% endif %}
+
+</div>
+
+<div class="row">
+
+ <div class="nav_bottom dark_bg col-md-7 col-md-offset-3">
+
+  <h4>Discover more</h4>
+
+  {% if page.previous %}
+  <a class="button hvr-sweep-to-top" href={{page.previous.url | prepend: site.baseurl }}>{{page.previous.title}}</a> {% endif %} {% if page.next %}
+  <a class="button hvr-sweep-to-top" href={{page.next.url | prepend: site.baseurl }}>{{page.next.title}}</a> {% endif %}
+
+ </div>
+
+</div>
+
+</article>
 
 </div>
diff --git a/_posts/2013-03-14-Scope020.markdown b/_posts/2013-03-14-Scope020.markdown
index b3bdf5f7..633f9561 100755
--- a/_posts/2013-03-14-Scope020.markdown
+++ b/_posts/2013-03-14-Scope020.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd: "2013-03-14"
 topics: "photography, robotics"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: ""
+fb_event_url:
+fb_gallery_id: "430323310387992.1073741825"
 talks:
 - title: ""
   artist: "aude rose"
diff --git a/_posts/2013-04-11-Scope021.markdown b/_posts/2013-04-11-Scope021.markdown
index 3dbacdbb..57064a9f 100755
--- a/_posts/2013-04-11-Scope021.markdown
+++ b/_posts/2013-04-11-Scope021.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd: "2013-04-11"
 topics: "3d, glitch, synthetic, performance, one man studio"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: ""
+fb_event_url:
+fb_gallery_id: "447869748633348"
 talks:
 - title: ""
   artist: "pussykrew"
diff --git a/_posts/2013-05-09-Scope022.markdown b/_posts/2013-05-09-Scope022.markdown
index 3700ad57..f4749d58 100755
--- a/_posts/2013-05-09-Scope022.markdown
+++ b/_posts/2013-05-09-Scope022.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd: "2013-05-09"
 topics: "performance, audiovisual, conception, humor, live cinema"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: ""
+fb_event_url:
+fb_gallery_id: "460722327348090"
 talks:
 - title: ""
   artist: "Tokyo Data Collective"
diff --git a/_posts/2013-06-06-Scope023.markdown b/_posts/2013-06-06-Scope023.markdown
index b1945b02..29da2d68 100755
--- a/_posts/2013-06-06-Scope023.markdown
+++ b/_posts/2013-06-06-Scope023.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd: "2013-06-06"
 topics: "cinema, audiovisual, machine, innovation, generative, hardware, mixing"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: ""
+fb_event_url:
+fb_gallery_id:
 talks:
 - title: "The void beyond this feeling"
   artist: "Rainer Kohlberger"
diff --git a/_posts/2013-07-11-Scope024.markdown b/_posts/2013-07-11-Scope024.markdown
index 4669cca0..a2a81a8b 100755
--- a/_posts/2013-07-11-Scope024.markdown
+++ b/_posts/2013-07-11-Scope024.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd: "2013-07-11"
 topics: ""
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: ""
+fb_event_url:
+fb_gallery_id: "489477097805946"
 talks:
 - title: "White Noise/Black Noise"
   artist: "Joel Dittrich"
diff --git a/_posts/2013-09-12-Scope025.markdown b/_posts/2013-09-12-Scope025.markdown
index 507c53ed..28863ebe 100755
--- a/_posts/2013-09-12-Scope025.markdown
+++ b/_posts/2013-09-12-Scope025.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd: "2014-09-12"
 topics: "mapping, mixing"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: ""
+fb_event_url:
+fb_gallery_id: "522626037824385"
 talks:
 - title: "Mixing after SD video"
   artist: "Tim Vis"
diff --git a/_posts/2013-10-10-Scope026.markdown b/_posts/2013-10-10-Scope026.markdown
index f902cfa0..bcca9316 100755
--- a/_posts/2013-10-10-Scope026.markdown
+++ b/_posts/2013-10-10-Scope026.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd: "2013-10-10"
 topics: "open source, glitch, pixel"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: ""
+fb_event_url:
+fb_gallery_id: "538621912891464"
 talks:
 - title: "touch.gl"
   artist: "pixelnoizz"
diff --git a/_posts/2013-11-14-Scope027.markdown b/_posts/2013-11-14-Scope027.markdown
index 90262a1a..37e4c9d6 100755
--- a/_posts/2013-11-14-Scope027.markdown
+++ b/_posts/2013-11-14-Scope027.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd: "2013-11-14"
 topics: "generative, filmmaker, humor"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: ""
+fb_event_url:
+fb_gallery_id: "556470151106640"
 talks:
 - title: "Half a Quarter"
   artist: "Georgina Espasa"
diff --git a/_posts/2013-12-12-Scope028.markdown b/_posts/2013-12-12-Scope028.markdown
index 189607c7..960d744e 100755
--- a/_posts/2013-12-12-Scope028.markdown
+++ b/_posts/2013-12-12-Scope028.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd:   "2013-12-12"
 topics: "dance performance, interactive, mapping, 3d"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: ""
+fb_event_url:
+fb_gallery_id: "570697173017271"
 talks:
 - title: "Video mapping Jam"
   artist: "Julien Bach"
diff --git a/_posts/2014-02-13-Scope029.markdown b/_posts/2014-02-13-Scope029.markdown
index 1b7ef4d4..e191c0d2 100755
--- a/_posts/2014-02-13-Scope029.markdown
+++ b/_posts/2014-02-13-Scope029.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd:   "2014-02-13"
 topics: "generative, design, interactive, gps, sound, narrative"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: ""
+fb_event_url:
+fb_gallery_id: "603842439702744"
 talks:
 - title: ""
   artist: "FELD - Studio for digital crafts"
diff --git a/_posts/2014-03-20-Scope030.markdown b/_posts/2014-03-20-Scope030.markdown
index f9d9796b..ed516fdf 100644
--- a/_posts/2014-03-20-Scope030.markdown
+++ b/_posts/2014-03-20-Scope030.markdown
@@ -8,6 +8,7 @@ topics:
 location: "Cinema Quadrat"
 location_website: "http://jetztkultur.de/bseite/b-seite/en/"
 fb_event_url:
+fb_gallery_id:
 talks:
 - title: "Sinsynplus"
   artist: "Martin Meyer"
diff --git a/_posts/2014-04-10-Scope031.markdown b/_posts/2014-04-10-Scope031.markdown
index 7b4bc093..5e1f47d3 100644
--- a/_posts/2014-04-10-Scope031.markdown
+++ b/_posts/2014-04-10-Scope031.markdown
@@ -8,6 +8,7 @@ topics:
 location: "Panke"
 location_website: "http://www.pankeculture.com"
 fb_event_url:
+fb_gallery_id: "645886938831627"
 talks:
 - title: "Guruguru kun"
   artist: "Vj Chuu"
diff --git a/_posts/2014-05-08-Scope032.markdown b/_posts/2014-05-08-Scope032.markdown
index 503bb531..af57110d 100644
--- a/_posts/2014-05-08-Scope032.markdown
+++ b/_posts/2014-05-08-Scope032.markdown
@@ -8,6 +8,7 @@ topics: "Light,Science,Mapping"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
 fb_event_url:
+fb_gallery_id: "647790778641243"
 talks:
 - title: "Make love not art"
   artist: "Lichtpiraten"
diff --git a/_posts/2014-06-12-Scope033.markdown b/_posts/2014-06-12-Scope033.markdown
index 1289c9ed..ecf161dc 100644
--- a/_posts/2014-06-12-Scope033.markdown
+++ b/_posts/2014-06-12-Scope033.markdown
@@ -8,6 +8,7 @@ topics: "Analog film,Hacking,VGA,Science,Universe"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
 fb_event_url:
+fb_gallery_id: "669323689821285"
 talks:
 - title: "Dot Matrix - A strategy for direct film"
   artist: "Richard Tuohy"
diff --git a/_posts/2014-07-10-Scope034.markdown b/_posts/2014-07-10-Scope034.markdown
index 76284cca..2394ebdb 100644
--- a/_posts/2014-07-10-Scope034.markdown
+++ b/_posts/2014-07-10-Scope034.markdown
@@ -8,6 +8,7 @@ topics: "Installation,Patching,Biodynamics,Vjing"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
 fb_event_url:
+fb_gallery_id: "683219441765043"
 talks:
 - title: "From a visual journey into another dimension."
   artist: "Quadrature"
diff --git a/_posts/2014-09-11-Scope035.markdown b/_posts/2014-09-11-Scope035.markdown
index 84a96bf1..255a7527 100644
--- a/_posts/2014-09-11-Scope035.markdown
+++ b/_posts/2014-09-11-Scope035.markdown
@@ -8,6 +8,7 @@ topics: "Media archaeology,Science,Interaction"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
 fb_event_url:
+fb_gallery_id: "715618228525164"
 talks:
 - title: "Probing the Past: A Media Archaeology of Handmade Electronic Sound"
   artist: "Derek Holzer"
diff --git a/_posts/2014-10-09-Scope036.markdown b/_posts/2014-10-09-Scope036.markdown
index d433c1dd..743858f4 100644
--- a/_posts/2014-10-09-Scope036.markdown
+++ b/_posts/2014-10-09-Scope036.markdown
@@ -8,6 +8,7 @@ topics: "Analog,Celluloid,Film archivism,Glitch,Error"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
 fb_event_url:
+fb_gallery_id: "729255753828078"
 talks:
 - title: "Photochemical Intiatives"
   artist: "Kevin Rice"
diff --git a/_posts/2014-11-13-Scope037.markdown b/_posts/2014-11-13-Scope037.markdown
index ebf8e02a..1cbf4919 100644
--- a/_posts/2014-11-13-Scope037.markdown
+++ b/_posts/2014-11-13-Scope037.markdown
@@ -8,6 +8,7 @@ topics: "Surveillance,Hacktivism,Internet"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
 fb_event_url:
+fb_gallery_id:
 talks:
 - title: "Privacy and online freedom of expression."
   artist: "Ioann Maria"
diff --git a/_posts/2014-12-11-Scope038.markdown b/_posts/2014-12-11-Scope038.markdown
index 96f847d8..a23f3c12 100644
--- a/_posts/2014-12-11-Scope038.markdown
+++ b/_posts/2014-12-11-Scope038.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd: "2014-12-11"
 topics: "Creative coding,Vjing,Performance,Randomness"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: "http://www.facebook.com/event/1234"
+fb_event_url:
+fb_gallery_id: "762234190530234"
 talks:
 - title: "Transforma: 2001 bis 2014"
   artist: "Transforma"
diff --git a/_posts/2015-01-08-Scope039.markdown b/_posts/2015-01-08-Scope039.markdown
index 383cb73f..f511c075 100644
--- a/_posts/2015-01-08-Scope039.markdown
+++ b/_posts/2015-01-08-Scope039.markdown
@@ -7,7 +7,8 @@ date_yyyy_mm_dd: "2015-01-08"
 topics: "Creative coding, Installation, Music composing"
 location: "Panke"
 location_website: "http://www.pankeculture.com"
-fb_event_url: "http://www.facebook.com/event/1234"
+fb_event_url:
+fb_gallery_id: "780088772078109"
 talks:
 - title: "Post-digital layers, ambiguities and background noise"
   artist: "Nicolas Wiese"
diff --git a/bower.json b/bower.json
index ecdb6fa7..715768ef 100644
--- a/bower.json
+++ b/bower.json
@@ -1,25 +1,26 @@
 {
- "name": "ScopeJekyll",
- "version": "0.0.0",
- "authors": [
-  "Open-Steps.org <contact@open-steps.org>"
- ],
- "description": "Scope 2015 website built with Jekyll",
- "license": "MIT",
- "homepage": "http://www.scopesessions.org",
- "private": true,
- "ignore": [
-  "**/.*",
-  "node_modules",
-  "bower_components",
-  "test",
-  "tests"
- ],
- "dependencies": {
-  "jquery": "~2.1.1",
-  "bootstrap": "~3.3.1",
-  "vegas": "~1.3.5",
-  "imagefill.js": "*",
-  "fontawesome": "~4.3.0"
- }
+  "name": "ScopeJekyll",
+  "version": "0.0.0",
+  "authors": [
+    "Open-Steps.org <contact@open-steps.org>"
+  ],
+  "description": "Scope 2015 website built with Jekyll",
+  "license": "MIT",
+  "homepage": "http://www.scopesessions.org",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "~2.1.1",
+    "bootstrap": "~3.3.1",
+    "vegas": "~1.3.5",
+    "imagefill.js": "*",
+    "fontawesome": "~4.3.0",
+    "picbookjs": "~0.3.0"
+  }
 }
diff --git a/css/custom.css b/css/custom.css
index e6834e1b..6cd353de 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -50,10 +50,16 @@ a:hover {
  margin-top: 40px;
  border-top: 1px solid #333;
  display: none;
+}
+.navigator h4 {
+
 }
 .navigator a {
  color: #000;
 }
+.navigator p {
+ color: #000;
+}
 .navigator a:hover {
  color: #9775af;
 }
@@ -65,16 +71,18 @@ a:hover {
  color: #9775af;
 }
 .navigator h4 {
- color: #000;
- padding-left: 0px;
+ color: #fff;
+ background: #9775af;
+ padding: 10px;
 }
 .upcoming {
  padding: 10px;
 }
 .upcoming-media img {
- height: 80px;
+ height: 60px;
  float: left;
  margin-right: 10px;
+ margin-left: 4px;
 }
 .site-header {
  background: #fff;
@@ -240,3 +248,9 @@ a:hover {
 .footer li img {
  height: 40px;
 }
+.picbook .album-title {
+ display:none;
+}
+.picbook .photo-list .photo-list-item .item-thumb {
+ max-width: 100px;
+}
diff --git a/index.html b/index.html
index 68599ed2..ce5e70c4 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,11 @@ layout: default
 
     <div class="talk-detail">
      <h4>{{talk.artist}} / {{talk.title}}</h4>
-     <p>{{talk.description}}</p>
+      {% if talk.description | size > 300 %}
+       <p>{{talk.description | truncate: 300 }} ...</p>
+      {% else %}
+       <p>{{talk.description}}</p>
+      {% endif%}
      {% if talk.artist_website %}
      <a class="button hvr-sweep-to-top" href={{talk.artist_website}} target="_blank">{{talk.artist_website}}</a> {% endif %} {% if talk.video_artist_url %}
      <br>