From c3dd4ae47b69df0d922b7a5d499668948c454d2f Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 9 Jul 2017 17:49:45 +0100
Subject: [PATCH] Add flickr gallery shortcode

---
 Makefile                       |  1 +
 data/flickr.yml                |  3 +++
 layouts/shortcodes/flickr.html | 19 +++++++++++++++++++
 package.json                   |  2 ++
 static/src/js/index.js         | 14 ++++++++++++++
 static/src/scss/style.scss     | 19 +++++++++++++++++++
 6 files changed, 58 insertions(+)
 create mode 100644 data/flickr.yml
 create mode 100644 layouts/shortcodes/flickr.html

diff --git a/Makefile b/Makefile
index b857b77..e11e752 100644
--- a/Makefile
+++ b/Makefile
@@ -13,6 +13,7 @@ build: install
 	$(NODE_BIN)/browserify $(STATIC_SRC)/js/index.js -o $(STATIC_BUILD)/js/app.js
 	$(NODE_BIN)/node-sass $(STATIC_SRC)/scss/style.scss $(STATIC_BUILD)/css/style.css --source-map-embed
 	cp -r $(BASEDIR)/node_modules/font-awesome/fonts $(STATIC_BUILD)/fonts
+	cp -r $(BASEDIR)/node_modules/lightgallery/dist/fonts $(STATIC_BUILD)
 	cp -r $(STATIC_SRC)/img $(STATIC_BUILD)/img
 	@hugo -vDEF
 
diff --git a/data/flickr.yml b/data/flickr.yml
new file mode 100644
index 0000000..f7a6bed
--- /dev/null
+++ b/data/flickr.yml
@@ -0,0 +1,3 @@
+---
+user_id: "132071530@N06"
+api_key: 920710c1f504befe4b3da60739e473c3
diff --git a/layouts/shortcodes/flickr.html b/layouts/shortcodes/flickr.html
new file mode 100644
index 0000000..f80733c
--- /dev/null
+++ b/layouts/shortcodes/flickr.html
@@ -0,0 +1,19 @@
+{{ $id := .Get 0 }}
+{{ $query := querify "format" "json" "nojsoncallback" "1" "api_key" .Site.Data.flickr.api_key  }}
+
+{{ $method := querify "method" "flickr.photosets.getPhotos" "user_id" .Site.Data.flickr.user_id "photoset_id" $id "extras" "url_o" }}
+{{ $photoset_orig:= (getJSON "https://api.flickr.com/services/rest/?" $query "&" $method).photoset }}
+
+{{ $method := querify "method" "flickr.photosets.getPhotos" "user_id" .Site.Data.flickr.user_id "photoset_id" $id "extras" "url_sq" }}
+{{ $photoset_thumb := (getJSON "https://api.flickr.com/services/rest/?" $query "&" $method).photoset }}
+
+<div id="light-gallery" class="row">
+{{ range $index, $element := $photoset_orig.photo }}
+    {{ $thumb := (index $photoset_thumb.photo $index).url_sq }}
+    <a href="{{ $element.url_o }}" title="View {{ $element.title }}" class="col-2">
+      <img src="{{ $thumb }}" alt="{{ $element.title }}"/>
+    </a>
+{{ end }}
+</div>
+
+
diff --git a/package.json b/package.json
index fe5ce04..e120d8d 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
     "club-alpha": "0.0.3",
     "font-awesome": "4.7.0",
     "jquery": "3.2.1",
+    "lg-thumbnail": "1.0.3",
+    "lightgallery": "1.4.0",
     "pygments-css": "1.0.0",
     "tstatic": "1.1.0"
   }
diff --git a/static/src/js/index.js b/static/src/js/index.js
index 836a0d4..5116adb 100644
--- a/static/src/js/index.js
+++ b/static/src/js/index.js
@@ -6,6 +6,8 @@ require('bootstrap');
 // Install alpha things
 require('club-alpha/assets/js/jquery.dropotron.min');
 require('club-alpha/assets/js/util');
+require('lightgallery/dist/js/lightgallery');
+require('lg-thumbnail/dist/lg-thumbnail');
 require('./alpha/main');
 
 
@@ -17,3 +19,15 @@ $('.image').each(function () {  // setup div-image hybrids
     ele.removeClass('image');
   }
 });
+
+
+$(document).ready(function () {
+  $('#light-gallery').lightGallery({
+    thumbnail:true,
+    animateThumb: false,
+    showThumbByDefault: false,
+    preload: 2,
+    download: false
+  });
+});
+
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index f8b77ab..c1192dd 100644
--- a/static/src/scss/style.scss
+++ b/static/src/scss/style.scss
@@ -6,6 +6,7 @@ $fa-font-path: "../fonts";
 @import "node_modules/bootstrap/scss/_transitions";
 @import "node_modules/bootstrap/scss/_card";
 @import "node_modules/pygments-css/github";
+@import "node_modules/lightgallery/dist/css/lightgallery";
 
 @import "alpha.min";
 
@@ -102,3 +103,21 @@ blockquote p {
     height: 100%;
   }
 }
+
+#light-gallery {
+  a {
+    cursor: zoom-in;
+    display: inline-block;
+    overflow: hidden;
+    width: 100%;
+
+    img {
+      width: 100%;
+      transition: opacity 0.5s;
+    }
+
+    &:hover img {
+      opacity: 0.7;
+    }
+  }
+}