Implementing facebook galleries

Improved navigator

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

_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"> -->
+   <h4><i class="fa fa-calendar"></i> {{post.date_text}} / #{{post.number}}</h4>
-   <h3>#{{post.number}}{{post.date_text}} ({{post.location}})</h3>
+    <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>

_layouts/event.html

@@ -68,15 +68,30 @@ layout: default
 
   </div>
 
+  {% if page.fb_gallery_id %}
+
    <div class="row">
 
-   <div class="gallery dark_bg col-md-4 col-md-offset-3">
+    <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>
+
+  {% endif %}
 
 </div>
 
-   <div class="nav_bottom dark_bg col-md-2 col-md-offset-1">
+<div class="row">
+
+ <div class="nav_bottom dark_bg col-md-7 col-md-offset-3">
 
   <h4>Discover more</h4>
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

bower.json

@@ -20,6 +20,7 @@
     "bootstrap": "~3.3.1",
     "vegas": "~1.3.5",
     "imagefill.js": "*",
-  "fontawesome": "~4.3.0"
+    "fontawesome": "~4.3.0",
+    "picbookjs": "~0.3.0"
   }
 }

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;
+ color: #fff;
- padding-left: 0px;
+ 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;
+}

index.html

@@ -48,7 +48,11 @@ layout: default
 
     <div class="talk-detail">
      <h4>{{talk.artist}} / {{talk.title}}</h4>
+      {% 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>