Add gallery shortcode (#398)

data/sri.toml

@@ -34,6 +34,9 @@
 [js.leaflet]
   version = "1.2.0"
   sri = "sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
+[js.fancybox]
+  version = "3.2.5"
+  sri = "sha256-X5PoE3KU5l+JcX+w09p/wHl9AzK333C4hJ2I9S5mD4M="
 
 # CSS
 
@@ -49,3 +52,6 @@
 [css.leaflet]
   version = "1.2.0"
   sri = "sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
+[css.fancybox]
+  version = "3.2.5"
+  sri = "sha256-ygkqlh3CYSUri3LhQxzdcm0n1EQvH2Y+U5S2idbLtxs="

layouts/partials/css/academic.css

@@ -226,6 +226,35 @@ small,
   color: red;
 }
 
+/*************************************************
+ *  Gallery.
+ **************************************************/
+
+.gallery {
+  margin: 0.5em -4px 1.5em -4px;
+  font-size: 0;
+}
+
+a[data-fancybox] {
+  text-decoration: none;
+}
+
+a[data-fancybox] img {
+  height: 250px;
+  max-width: inherit;
+  display: inherit;
+  margin: 0;
+  padding: 4px;
+  box-shadow: none;
+  vertical-align: inherit;
+}
+
+.fancybox-caption {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  text-align: center;
+}
+
 /*************************************************
  *  Pager.
  **************************************************/

layouts/partials/footer.html

@@ -14,6 +14,7 @@
     {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/%s/imagesloaded.pkgd.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.imagesLoaded.version $js.imagesLoaded.sri | safeHTML }}
     {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/js/bootstrap.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.bootstrap.version $js.bootstrap.sri | safeHTML }}
     {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/%s/isotope.pkgd.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.isotope.version $js.isotope.sri | safeHTML }}
+    {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/fancybox/%s/jquery.fancybox.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.fancybox.version $js.fancybox.sri | safeHTML }}
     {{ if eq .Site.Params.map 1 }}
     {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/%s/gmaps.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.gmaps.version $js.gmaps.sri | safeHTML }}
     {{ else if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }}
@@ -24,6 +25,7 @@
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/{{- $js.imagesLoaded.version -}}/imagesloaded.pkgd.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/{{- $js.bootstrap.version -}}/js/bootstrap.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/{{- $js.isotope.version -}}/isotope.pkgd.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/{{- $js.fancybox.version -}}/jquery.fancybox.min.js"></script>
     {{ if eq .Site.Params.map 1 }}
     <script src="//cdnjs.cloudflare.com/ajax/libs/gmaps.js/{{- $js.gmaps.version -}}/gmaps.min.js"></script>
     {{ else if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }}

layouts/partials/header.html

@@ -55,6 +55,7 @@
   {{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/css/bootstrap.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.bootstrap.version $sri.css.bootstrap.sri | safeHTML }}
   {{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/academicons/%s/css/academicons.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.academicons.version $sri.css.academicons.sri | safeHTML }}
   {{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/%s/css/font-awesome.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.fontAwesome.version $sri.css.fontAwesome.sri | safeHTML }}
+  {{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/fancybox/%s/jquery.fancybox.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.fancybox.version $sri.css.fancybox.sri | safeHTML }}
   {{ if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }}
   {{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/leaflet/%s/leaflet.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.leaflet.version $sri.css.leaflet.sri | safeHTML }}
   {{ end }}
@@ -62,6 +63,7 @@
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/{{- $sri.css.bootstrap.version -}}/css/bootstrap.min.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/academicons/{{- $sri.css.academicons.version -}}/css/academicons.min.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/{{- $sri.css.fontAwesome.version -}}/css/font-awesome.min.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/{{- $sri.css.fancybox.version -}}/jquery.fancybox.min.css" media="screen">
   {{ if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }}
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/{{- $sri.css.leaflet.version -}}/leaflet.css">
   {{ end }}

layouts/shortcodes/gallery.html

@@ -0,0 +1,16 @@
+{{ $.Scratch.Set "album" "1" }}
+{{ with .Get "album" }}{{ $.Scratch.Set "album" . }}{{ end }}
+<div class="gallery">
+  {{ range (where $.Page.Params.gallery_item "album" ($.Scratch.Get "album")) }}
+  {{/* Set image path. */}}
+  {{ $.Scratch.Set "src" .image }}
+  {{ if gt (len .image) 4 }}
+    {{ if ne "http" (slicestr .image 0 4) }}
+      {{ $.Scratch.Set "src" (printf "img/%s" .image | absURL) }}
+    {{ end }}
+  {{ end }}
+  <a data-fancybox="gallery{{ with .album }}-{{.}}{{ end }}" {{ with .caption }}data-caption="{{.}}"{{ end }} href="{{$.Scratch.Get "src"}}">
+    <img alt="" src="{{$.Scratch.Get "src"}}">
+  </a>
+  {{ end }}
+</div>