Merge pull request #8 from 2-REC/image-gallery

Image gallery

15 files changed, 498 insertions, 58 deletions

diff --git a/README.md b/README.md
index 71ef239..4e030c9 100644
--- a/README.md
+++ b/README.md
@@ -14,12 +14,16 @@ Noteworthy features of this Hugo theme are:
 - Responsive portfolio grids with hover effects.
 - Can be used as a profesional showcase, a personal one, or both.
 - Dynamic generation of pages based on data content.
+- Image gallery functionality*
 - Easy site navigation via header navigation bar.
 - Easy content navigation via sidebars, and taxinomies (tags and categories).
 - Customisable CSS to override default values (such as main theme colours, fonts, etc.).
 - 404 page.
 - ...
 
+* Thanks to [liwenyip](//github.com/liwenyip) for the [PhotoSwipe](https://photoswipe.com) gallery integration in Hugo: [hugo-easy-gallery](//github.com/liwenyip/hugo-easy-gallery)
+
+
 ![Hugo MyPortfolio Theme Screenshot](https://github.com/2-REC/hugo-myportfolio-theme/blob/master/images/screenshot.png)
 
 ## Theme structure and layout
@@ -267,8 +271,10 @@ This theme is released under the Apache License 2.0 For more information read th
 
 ## Acknowledgements
 
-Thanks to 
+Thanks to:
 
 - [digitalcraftsman](//github.com/digitalcraftsman) for creating the Creative theme
 - [Steve Francia](//github.com/spf13) for creating Hugo and the awesome community around the project
 - [David Miller](//github.com/davidtmiller) for creating the original theme
+- [liwenyip](//github.com/liwenyip) for the PhotoSwipe gallery integration in Hugo
+- [PhotoSwipe](https://photoswipe.com) for the gallery functionality
diff --git a/TODO/TODO.md b/TODO/TODO.md
index 4d54607..4cedd22 100644
--- a/TODO/TODO.md
+++ b/TODO/TODO.md
@@ -236,6 +236,14 @@ CODE CHECK/BUGS:
                 => Need changes in CSS for main tags (html, body, sections, etc?)
             - [ ] Set content...
 
+        - [ ] gallery.html
+            - [ ] Check JQUERY loading.
+                => OK to load both files in tail.html? (should only load one)
+            - LATER:
+                - [ ] Fix ".Inner" stuff (with "figure")
+                - [ ] Add "figure.html" file & make changes.
+                    => Do the same as for gallery (paths, change to partial instead of shortcode, etc).
+
         - [ ] head.html
             (Look at backuped file)
             - [ ] Use some "blocks" to allow overriding parts..
diff --git a/archetypes/default.md b/archetypes/default.md
index 8488c76..8cde49d 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -5,17 +5,21 @@ subtitle: "<CATCH_PHRASE>"
 #image: "<IMAGE_FILE>"
 #small_image: "<IMAGE_FILE>"
 #small_url: "<URL>"
-categories: [ "" ]
-tags: [ "" ]
+categories: [ "<CATEGORY>" ]
+tags: [ "<TAG>" ]
+#images_directory; "images"
+#images_static: "false"
+#images_copyright: "<COPYRIGHT>"
+##For "image" image files:
+# (Only required for caption and specific copyrights)
+#images:
+#- src: "<IMAGE_FILE>"
+#  title: "<LEGEND>"
+#  copyright: "<COPYRIGHT>"
+##For "logo" image files:
 #resources:
-##For each "logo" image file:
 #- src: "logos/<IMAGE_FILE>"
 #  title: "<TOOLTIP>"
-##For each "image" image file:
-#- src: "images/<IMAGE_FILE>"
-#  title: "<TOOLTIP>"
-#  params:
-#    copyright: "<TEXT>"
 ---
 
 <b>CLIENT:</b> ...<br>
diff --git a/exampleSite/content/perso/drawings/random/index.md b/exampleSite/content/perso/drawings/random/index.md
index 24abfa2..45ede15 100644
--- a/exampleSite/content/perso/drawings/random/index.md
+++ b/exampleSite/content/perso/drawings/random/index.md
@@ -3,9 +3,8 @@ title: "Random"
 subtitle: "A random drawing"
 categories: [ "art" ]
 tags: [ "drawing", "asian" ]
-
-resources:
-- src: "images/flower_scene.jpg"
+images:
+- src: "flower_scene.jpg"
   title: "A flower seller in HCMC"
 ---
 
diff --git a/exampleSite/content/perso/food/moo-moo/index.md b/exampleSite/content/perso/food/moo-moo/index.md
index f53d511..078c907 100644
--- a/exampleSite/content/perso/food/moo-moo/index.md
+++ b/exampleSite/content/perso/food/moo-moo/index.md
@@ -6,13 +6,12 @@ small_image: "small.png"
 small_url: "https://www.moobeefsteak.com.vn/"
 categories: [ "food", "vietnam" ]
 tags: [ "seafood", "foie gras", "western", "salad" ]
-resources:
-##For each "image" image file:
-- src: "images/moo_moo_foie_gras.jpg"
+images:
+- src: "moo_moo_foie_gras.jpg"
   title: "Foie gras"
-- src: "images/moo_moo_salad.jpg"
+- src: "moo_moo_salad.jpg"
   title: "Salad"
-- src: "images/moo_moo_seafood.jpg"
+- src: "moo_moo_seafood.jpg"
   title: "Seafood"
 ---
 
diff --git a/exampleSite/content/perso/food/vietnam/index.md b/exampleSite/content/perso/food/vietnam/index.md
index 9a07d68..4cf7b0b 100644
--- a/exampleSite/content/perso/food/vietnam/index.md
+++ b/exampleSite/content/perso/food/vietnam/index.md
@@ -4,16 +4,14 @@ subtitle: "Some vietnamese dishes"
 image: "pho99_fried_pho.jpg"
 categories: [ "food", "vietnam" ]
 tags: [ "soup", "pho", "asian" ]
-resources:
-##For each "image" image file:
-- src: "images/pho99_fried_pho.jpg"
+images:
+- src: "pho99_fried_pho.jpg"
   title: "Fried pho"
-- src: "images/ut_hue.jpg"
+- src: "ut_hue.jpg"
   title: "Bun Bo Hue"
-- src: "images/royal_lunch.jpg"
+- src: "royal_lunch.jpg"
   title: "Cheap lunch"
-  params:
-    copyright: "my photo"
+  copyright: "my photo"
 ---
 
 Description:
diff --git a/exampleSite/content/perso/statues/humans/index.md b/exampleSite/content/perso/statues/humans/index.md
index 6cb1cee..cefdc83 100644
--- a/exampleSite/content/perso/statues/humans/index.md
+++ b/exampleSite/content/perso/statues/humans/index.md
@@ -4,11 +4,6 @@ subtitle: "Some statues of humans."
 small_image: "small.jpg"
 categories: [ "art", "statue", "vietnam" ]
 tags: [ "asian", "human" ]
-resources:
-##For each "image" image file:
-- src: "images/1.jpg"
-- src: "images/2.jpg"
-- src: "images/6.jpg"
 ---
 
 Description:
diff --git a/exampleSite/content/perso/statues/others/index.md b/exampleSite/content/perso/statues/others/index.md
index 7dca83d..bdcd19d 100644
--- a/exampleSite/content/perso/statues/others/index.md
+++ b/exampleSite/content/perso/statues/others/index.md
@@ -4,11 +4,6 @@ subtitle: "Some statues."
 image: "4.jpg"
 categories: [ "statue", "vietnam" ]
 tags: [ "asian" ]
-resources:
-##For each "image" image file:
-- src: "images/3.jpg"
-- src: "images/8.jpg"
-- src: "images/9.jpg"
 ---
 
 Description:
diff --git a/exampleSite/content/pro/company/single-project/index.md b/exampleSite/content/pro/company/single-project/index.md
index b2d8731..68d1405 100644
--- a/exampleSite/content/pro/company/single-project/index.md
+++ b/exampleSite/content/pro/company/single-project/index.md
@@ -3,9 +3,8 @@ title: "A Weird Project"
 subtitle: "Freestyle weirdness"
 categories: [ "art", "IT" ]
 tags: [ "bundle", "drawing" ]
-resources:
-- src: "images/draw2.jpg"
-  title: "Weird drawinf"
-  params:
-    copyright: "DEREK SEVERIN"
+images:
+- src: "draw2.jpg"
+  title: "Weird drawing"
+  copyright: "DEREK SEVERIN"
 ---
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 8b606f5..551431e 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,4 +1,5 @@
 {{ define "content" }}
+
     {{ $logos := .Resources.Match "logos/*" }}
     {{ if gt (len $logos) 0 }}
         <ul class="logos-list" aria-hidden="true">
@@ -6,7 +7,7 @@
                 {{ if eq .ResourceType "image" }}
                     {{ $image := .Fit "64x64"  }}
                     <li>
-                        <figure>
+                        <figure class="no-photoswipe">
                             <img class="logo" src="{{ $image.RelPermalink }}" alt="" title="{{ $image.Title }}">
                         </figure>
                     </li>
@@ -22,24 +23,13 @@
         </div>
     {{ end }}
 
-    {{ $images := .Resources.Match "images/*" }}
-    {{ if gt (len $images) 0 }}
-        <ul class="images-list" aria-hidden="true">
-            {{ range $images }}
-                {{ if eq .ResourceType "image" }}
-                    {{ $image := .Resize "512x"  }}
-                    <li>
-                        <figure>
-                            <img class="image" src="{{ $image.RelPermalink }}" alt="" title="{{ $image.Title }}">
-                            {{ with $image.Params.copyright }}
-                                <figcaption class="copyright">{{ . | markdownify }}</figcaption>
-                            {{ end }}
-                        </figure>
-                    </li>
-                {{ end }}
-            {{ end }}
-        </ul>
-    {{ end }}
+    {{ $images_directory := .Params.images_directory | default "images" }}
+    {{ $images_static := .Params.images_static | default "false" }}
+    {{ $images_copyright := .Params.images_copyright }}
+    {{ $images_params := .Params.images }}
+    {{ partial "gallery.html" (dict "page" . "dir" $images_directory "static" $images_static "images_params" $images_params "images_copyright" $images_copyright) }}
+    {{ partial "load-photoswipe.html" (dict "page" .) }}
+
 {{ end }}
 
 {{ define "lists" }}
diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html
new file mode 100644
index 0000000..2bc90fa
--- /dev/null
+++ b/layouts/partials/gallery.html
@@ -0,0 +1,121 @@
+<!--
+Modified version of "gallery.html" from https://github.com/liwenyip/hugo-easy-gallery/
+Modifications mostly to allow using the gallery as a partial instead of a shortcode.
+
+Input Parameters:
+- Mandatory:
+	- "page": Page
+		- $.Page.Scratch		=> $.page.Scratch
+		- .Site.BaseURL			=> $.page.Site.BaseURL
+		- $.Page.Dir			=> $.page.Dir
+- Optional:
+	- "dir": String (directory)
+		- .Get "dir"			=> $.dir (if defined, else using ".Inner")
+	- "static": Boolean
+		- $.Get "static"		=> $.static (if defined, else "false" by default)
+	- "thumb": String (suffix)
+		- $.Get "thumb"			=> $.thumb (if defined, else "-thumb" by default)
+	- "caption_position": Enum (position: "bottom", "center", "none")
+		- .Get "caption-position"	=> $.caption_position (if defined, else "bottom" by default)
+	- "caption_effect": Enum (effect: "slide", "fade", "none")
+		- .Get "caption-effect"		=> $.caption_effect (if defined, else "slide" by default)
+	- "hover_effect": Enum (effect: "zoom", "grow", "shrink", "slideup", "slidedown", "none")
+		- .Get "hover-effect"		=> $.hover_effect (if defined, else "zoom" by default)
+	- "hover_transition": Enum (transition: "none" or not set)
+		- .Get "hover-transition"	=> $.hover_transition (if defined, else "none" by default)
+
+New Input Parameters:
+- Optional:
+	- "images_copyright": String (copyright)
+		=> General copyright for all images.
+	- "images": Array (images parameters)
+		- "src": String (filename) - MANDATORY
+			=> Must correspond to an image in "dir" directory.
+		- "title": String (legend)
+			=> Legend of the image.
+		- "copyright": String (copyright)
+			=> Specific copyright for the image.
+-->
+
+<!--
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+-->
+<!-- count how many times we've called this shortcode; load the css if it's the first time -->
+{{- if not (.page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />{{ end }}
+{{- .page.Scratch.Add "figurecount" 1 }}
+{{ $baseURL := .page.Site.BaseURL }}
+<div class="gallery caption-position-{{ with .caption_position | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .caption_effect | default "slide" }}{{.}}{{end}} hover-effect-{{ with .hover_effect | default "zoom" }}{{.}}{{end}} {{ if ne (.hover_transition) "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
+	{{- with .dir -}}
+		<!-- If a directory was specified, generate figures for all of the images in the directory -->
+		{{- if eq $.static "true" -}}
+            {{ $.page.Scratch.Set "dirURL" (print .) }}
+            {{ $.page.Scratch.Set "dirFiles" (print "/static/" .) }}
+		{{- else -}}
+			{{- $tmpDir := print (replace $.page.Dir  "\\" "/") "/" . }}
+            {{ $.page.Scratch.Set "dirURL" $tmpDir }}
+            {{ $.page.Scratch.Set "dirFiles" (print "/content/" $tmpDir "/") }}
+		{{- end -}}
+		{{- $dir := $.page.Scratch.Get "dirURL" }}
+		{{- $dirFiles := $.page.Scratch.Get "dirFiles" }}
+		{{- if (fileExists $dirFiles) -}}
+			{{- $files := readDir $dirFiles }}
+
+			{{- range $files -}}
+				<!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
+				{{- $thumbext := $.thumb | default "-thumb" }}
+				{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
+				{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }}<!-- is the current file an image? -->
+				{{- if and $isimg (not $isthumb) }}
+					{{ $name := .Name }}
+					{{ with $.images_copyright }}
+						{{ $.page.Scratch.Set "copyright" (print " - &copy; " .) }}
+					{{ end }}
+
+					{{ range $.images_params }}
+						{{ if eq .src $name }}
+							{{ with .title }}
+								{{ $.page.Scratch.Set "title" . }}
+							{{ end }}
+							{{ with .copyright }}
+								{{ $.page.Scratch.Set "copyright" (print " - &copy; " .) }}
+							{{ end }}
+						{{ end }}
+					{{ end }}
+
+					{{- $title := ($.page.Scratch.Get "title") | default (.Name | replaceRE "\\..*" "") }}
+					{{- $copyright := ($.page.Scratch.Get "copyright") | default "" }}
+
+					{{- $captionthumb :=  $title }}
+					{{- $caption :=  (print $title $copyright) }}
+
+					{{- $linkURL := print $baseURL $dir "/" .Name | absURL }}<!-- absolute URL to hi-res image -->
+					{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
+					{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? --> 
+					{{- $thumbURL := print $baseURL $dir "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
+					<div class="box">
+					<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+						<div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
+							<img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
+						</div>
+					<figcaption>
+					<p>{{ $captionthumb }}</p>
+					</figcaption>
+						<a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
+					</figure>
+					</div>
+					{{ $.page.Scratch.Delete "title" }}
+					{{ $.page.Scratch.Delete "copyright" }}
+				{{- end }}
+			{{- end }}
+		{{- end }}
+		{{ $.page.Scratch.Delete "dirURL" }}
+		{{ $.page.Scratch.Delete "dirFiles" }}
+	{{- else -}}
+{{/*
+TODO: Need to change the "figure" shortcode to a partial.
+Not required for now as not used.
+		<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
+	  {{ .Inner }}
+*/}}
+	{{- end }}
+</div>
diff --git a/layouts/partials/load-photoswipe.html b/layouts/partials/load-photoswipe.html
new file mode 100644
index 0000000..d9921b1
--- /dev/null
+++ b/layouts/partials/load-photoswipe.html
@@ -0,0 +1,77 @@
+<!--
+Put this file in /layouts/shortcodes/load-photoswipe.html
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+-->
+
+<!-- prevent this shortcode from being loaded more than once per page -->
+{{ if not (.page.Scratch.Get "photoswipeloaded") }}
+  {{ .page.Scratch.Set "photoswipeloaded" 1 }}
+
+<!--
+*** jQuery must be loaded before load-photoswipe.js ***
+- If your template already loads jQuery in the header then you don't need to load it again here.
+- If your template already loads jQuery in the footer, then you could load load-photoswipe.js from the footer instead
+-->
+<!-- these files are loaded in the theme footer
+<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
+<script src="/js/load-photoswipe.js"></script>
+-->
+
+<!-- Photoswipe css/js libraries -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />
+<!-- these files are loaded in the theme footer
+<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
+-->
+
+<!-- Root element of PhotoSwipe. Must have class pswp. -->
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+<!-- Background of PhotoSwipe.
+     It's a separate element, as animating opacity is faster than rgba(). -->
+<div class="pswp__bg"></div>
+<!-- Slides wrapper with overflow:hidden. -->
+<div class="pswp__scroll-wrap">
+    <!-- Container that holds slides.
+      PhotoSwipe keeps only 3 of them in DOM to save memory.
+      Don't modify these 3 pswp__item elements, data is added later on. -->
+    <div class="pswp__container">
+      <div class="pswp__item"></div>
+      <div class="pswp__item"></div>
+      <div class="pswp__item"></div>
+    </div>
+    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+    <div class="pswp__ui pswp__ui--hidden">
+    <div class="pswp__top-bar">
+      <!--  Controls are self-explanatory. Order can be changed. -->
+      <div class="pswp__counter"></div>
+      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+<!--
+      <button class="pswp__button pswp__button--share" title="Share"></button>
+-->
+      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+      <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
+      <!-- element will get class pswp__preloader--active when preloader is running -->
+      <div class="pswp__preloader">
+        <div class="pswp__preloader__icn">
+          <div class="pswp__preloader__cut">
+            <div class="pswp__preloader__donut"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+      <div class="pswp__share-tooltip"></div>
+    </div>
+    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+    </button>
+    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+    </button>
+    <div class="pswp__caption">
+      <div class="pswp__caption__center"></div>
+    </div>
+    </div>
+    </div>
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/tail.html b/layouts/partials/tail.html
index ac0526b..ed6fbd7 100644
--- a/layouts/partials/tail.html
+++ b/layouts/partials/tail.html
@@ -1,5 +1,15 @@
 {{ "<!-- TAIL.HTML -->" | safeHTML }}
+<!--
 <script src="{{ "plugins/jquery/jquery.js" | absURL }}"></script>
+-->
+<script src="{{ "plugins/jquery/jquery.js" | absURL }}"></script>
+<!-- Load PhotoSwipe js if the load-photoswipe shortcode has been used -->
+{{ if ($.Scratch.Get "photoswipeloaded") }}
+<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
+<script src="/js/load-photoswipe.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
+{{ end }}
 <script src="{{ "plugins/bootstrap/js/bootstrap.min.js" | absURL }}"></script>
 <script src="{{ "plugins/jquery/jquery.easing.min.js" | absURL }}"></script>
 <script src="{{ "plugins/jquery/jquery.fittext.js" | absURL }}"></script>
diff --git a/static/css/hugo-easy-gallery.css b/static/css/hugo-easy-gallery.css
new file mode 100644
index 0000000..d78dfec
--- /dev/null
+++ b/static/css/hugo-easy-gallery.css
@@ -0,0 +1,159 @@
+/*
+Put this file in /static/css/hugo-easy-gallery.css
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+*/
+
+
+/*
+Grid Layout Styles
+*/
+.gallery {
+    overflow: hidden;
+    margin: 10px;
+    max-width: 768px;
+}
+.gallery .box {
+    float: left;
+    position: relative;
+    /* Default: 1 tile wide */
+    width: 100%;
+    padding-bottom: 100%; 
+}
+@media only screen and (min-width : 365px) {
+    /* Tablet view: 2 tiles */
+    .gallery .box {
+        width: 50%;
+        padding-bottom: 50%;
+    }
+}
+@media only screen and (min-width : 480px) {
+    /* Small desktop / ipad view: 3 tiles */
+    .gallery .box {
+        width: 33.3%;
+        padding-bottom: 33.3%; /*  */
+    }
+}
+@media only screen and (min-width : 9999px) {
+   /* Medium desktop: 4 tiles */
+   .box {
+      width: 25%;
+      padding-bottom: 25%;
+   }
+}
+
+/*
+Transition styles
+*/
+.gallery.hover-transition figure,
+.gallery.hover-effect-zoom .img, 
+.gallery:not(.caption-effect-appear) figcaption,
+.fancy-figure:not(.caption-effect-appear) figcaption {
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+}
+/*
+figure styles
+*/
+figure {
+    position:relative; /* purely to allow absolution positioning of figcaption */
+    overflow: hidden;
+}
+.gallery figure {
+    position: absolute;
+    left: 5px;
+    right: 5px;
+    top: 5px;
+    bottom: 5px;
+}
+.gallery.hover-effect-grow figure:hover {
+    transform: scale(1.05);
+}
+.gallery.hover-effect-shrink figure:hover {
+    transform: scale(0.95);
+}
+.gallery.hover-effect-slidedown figure:hover {
+    transform: translateY(5px);
+}
+.gallery.hover-effect-slideup figure:hover {
+    transform: translateY(-5px);
+}
+
+/*
+img / a styles
+*/
+
+.gallery .img {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+.gallery.hover-effect-zoom figure:hover .img {
+    transform: scale(1.05);
+}
+.gallery img {
+    display: none; /* only show the img if not inside a gallery */
+}
+figure a {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+/*
+figcaption styles
+*/
+.gallery figcaption,
+.fancy-figure figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000;
+    color: #FFF;
+    text-align: center;
+    font-size: 75%; /* change this if you want bigger text */
+    background: rgba(0, 0, 0, 0.5);
+    opacity: 1;
+    cursor: pointer;
+}
+.gallery.caption-position-none figcaption,
+.fancy-figure.caption-position-none figcaption  {
+    display: none;
+}
+.gallery.caption-position-center figcaption,
+.fancy-figure.caption-position-center figcaption {
+    top: 0;
+    padding: 40% 5px;
+}
+.gallery.caption-position-bottom figcaption,
+.fancy-figure.caption-position-bottom figcaption {
+    padding: 5px;
+}
+.gallery.caption-effect-fade figure:not(:hover) figcaption,
+.gallery.caption-effect-appear figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
+    background: rgba(0, 0, 0, 0);
+    opacity: 0;
+}
+.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
+    margin-bottom: -100%;
+}
+.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption  {
+    top: 100%;
+}
+figcaption p {
+    margin: auto; /* override style in theme */
+}
+
diff --git a/static/js/load-photoswipe.js b/static/js/load-photoswipe.js
new file mode 100644
index 0000000..978c66d
--- /dev/null
+++ b/static/js/load-photoswipe.js
@@ -0,0 +1,80 @@
+/*
+Put this file in /static/js/load-photoswipe.js
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+*/
+
+/* Show an alert if this js file has been loaded twice */
+if (window.loadphotoswipejs) {
+	window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
+} 
+var loadphotoswipejs = 1
+
+/* TODO: Make the share function work */
+$( document ).ready(function() {
+	/*
+	Initialise Photoswipe
+	*/
+	var items = []; // array of slide objects that will be passed to PhotoSwipe()
+	// for every figure element on the page:
+	$('figure').each( function() {
+		if ($(this).attr('class') == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
+		// get properties from child a/img/figcaption elements,
+		var $figure = $(this),
+			$a 		= $figure.find('a'),
+			$img 	= $figure.find('img'),
+			$src	= $a.attr('href'),
+			$title  = $img.attr('alt'),
+			$msrc	= $img.attr('src');
+		// if data-size on <a> tag is set, read it and create an item
+		if ($a.data('size')) {
+			var $size 	= $a.data('size').split('x');
+			var item = {
+				src		: $src,
+				w		: $size[0],
+				h 		: $size[1],
+				title 	: $title,
+				msrc	: $msrc
+			};
+			console.log("Using pre-defined dimensions for " + $src);
+		// if not, set temp default size then load the image to check actual size
+		} else {
+			var item = {
+				src		: $src,
+				w		: 800, // temp default size
+				h 		: 600, // temp default size
+				title 	: $title,
+				msrc	: $msrc
+			};
+			console.log("Using default dimensions for " + $src);
+			// load the image to check its dimensions
+			// update the item as soon as w and h are known (check every 30ms)
+			var img = new Image(); 
+			img.src = $src;
+			var wait = setInterval(function() {
+				var w = img.naturalWidth,
+					h = img.naturalHeight;
+				if (w && h) {
+					clearInterval(wait);
+					item.w = w;
+					item.h = h;
+					console.log("Got actual dimensions for " + img.src);
+				}
+			}, 30);
+	   	}
+		// Save the index of this image then add it to the array
+		var index = items.length;
+		items.push(item);
+		// Event handler for click on a figure
+		$figure.on('click', function(event) {
+			event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
+			// Get the PSWP element and initialise it with the desired options
+			var $pswp = $('.pswp')[0];
+			var options = {
+				index: index, 
+				bgOpacity: 0.8,
+				showHideOpacity: true
+			}
+			new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
+		});	
+	});
+});
\ No newline at end of file