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 }}
+
+
+{{ range $index, $element := $photoset_orig.photo }}
+ {{ $thumb := (index $photoset_thumb.photo $index).url_sq }}
+
+
+
+{{ end }}
+
+
+
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;
+ }
+ }
+}