Add hugo-easy-gallery (rev 2935729), try one post with it

drafts/2017-04-20-modularity.org

@@ -10,12 +10,12 @@ _Modularity_ and _abstraction_ feature prominently wherever computers
 are involved.  This is meant very broadly: it applies to designing
 software, using software, integrating software, and to a lot of
 hardware as well.  It applies elsewhere, and almost certainly
-originated there first, however, it appears to be particularly
+originated there first, however, it appears especially crucial around
-crucial around software.
+software.
 
 Definitions, though, are a bit vague (including anything in this
 post).  My goal in this post isn't to try to (re)define them, but to
-explain a bit of their essence, and expand on a few theses:
+explain their essence and expand on a few theses:
 
 - Modularity arises naturally in a wide array of places.
 - Modularity and abstraction are intrinsically connected.
@@ -60,9 +60,10 @@ different from being vague.  The purpose of abstraction is not to be
 vague, but to create a new semantic level in which one can be
 absolutely precise."  Joel Spolsky, in one of few instances of me
 actually caring what he said, also has a blog post from 2002 on the
-[[https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/][Law of Leaky Abstractions]].  The [[https://en.wikipedia.org/wiki/Principle_of_least_privilege][principle of least privilege]] is
+[[https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/][Law of Leaky Abstractions]] ("All non-trivial abstractions, to some
-likewise a thing. So, abstraction too has its practical and
+degree, are leaky.")  The [[https://en.wikipedia.org/wiki/Principle_of_least_privilege][principle of least privilege]] is likewise a
-theoretical limitations.
+thing. So, abstraction too has its practical and theoretical
+limitations.
 
 * How They Relate
 
@@ -112,15 +113,15 @@ some details implies that a module is handling those details, that the
 details shouldn't matter, and what does matter is the abstraction one
 is using.
 
-# -----
+One of Rich Hickey's favorite topics is *composition*, and with good
-Consider the information this module deals in, in essence.
+reason (and you should check out [[http://www.infoq.com/presentations/Simple-Made-Easy/][Simple Made Easy]] regardless).  This
+relates as well: to *compose* things together effectively into bigger
+parts requires that they support some common abstraction.
+
+In the same area, [[https://clojurefun.wordpress.com/2012/08/17/composition-over-convention/][Composition over convention]] is a good read on how
+/frameworks/ run counter to modularity: they aren't built to behave
+like modules of a larger system.
 
-What is the most general form this information could be expressed in,
-without being so general as to encompass other things that are
-irrelevant or so low-level as to needlessly constrain the possible
-contexts?
- 
-(Aristotle's theory of definitions?)
 
 # -----
 
@@ -152,6 +153,33 @@ contains fewer incidental details, and more essential details.
 
 # -------
 
+* Information
+
+I referred earlier to the abstractions themselves as both boundaries
+and communications channels.  Another common view is that abstractions
+are *contracts* with a communicated and agreed purpose, and I think
+this is a useful definition too: it conveys the notion that there are
+multiple parties involved and that they are free to behave as needed
+provided that they fulfill some obligation
+
+Some definitions refer directly to information, like the [[https://en.wikipedia.org/wiki/Abstraction_principle_(computer_programming)][abstraction
+principle]] which aims to reduce duplication of information which fits
+with [[https://en.wikipedia.org/wiki/Don%2527t_repeat_yourself][don't repeat yourself]] so that "a modification of any single
+element of a system does not require a change in other logically
+unrelated elements".
+
+
+
+# ----- FIXME
+Consider the information this module deals in, in essence.
+
+What is the most general form this information could be expressed in,
+without being so general as to encompass other things that are
+irrelevant or so low-level as to needlessly constrain the possible
+contexts?
+ 
+(Aristotle's theory of definitions?)
+
 * Less-Conventional Examples
 
 One thing I've watched with some interest is when new abstractions
@@ -256,9 +284,6 @@ machine learning conflicts with proper modularity and abstraction.
 a good post and shows some sorts of abstraction that still exist
 at least in neural networks.)
 
-[[https://clojurefun.wordpress.com/2012/08/17/composition-over-convention/][Composition over convention]] is an important read on why /frameworks/
-can also run completely counter to modularity.
-
 Submitted without further comment:
 https://github.com/stevemao/left-pad/issues/4
 
@@ -307,11 +332,6 @@ https://github.com/stevemao/left-pad/issues/4
 
 - https://twitter.com/fchollet/status/962074070513631232
 
-- How does this fit with /composition/? Does it?
-  - The ability to sensibly compose things depends on them having some
-    sort of well-defined, compatible boundary - right?
-  - Note also /decomposition/ here, as in /decomposing/ something into
-    parts.
 - [[https://mitpress.mit.edu/sites/default/files/sicp/full-text/book/book-Z-H-9.html#%25_chap_1][From SICP chapter 1 intro]]: "The acts of the mind, wherein it exerts
   its power over simple ideas, are chiefly these three: 1. Combining
   several simple ideas into one compound one, and thus all complex
@@ -338,14 +358,11 @@ https://github.com/stevemao/left-pad/issues/4
   boundaries, the abstractions that it interfaces with or that it
   implements) so that the 'inside' can change more or less freely
   without having any effect on the outside.
-- Abstractions as _contracts_ with a communicated/agreed purpose
 - Abstractions as a way of reducing the work required to add
   functionality (changes can be made just in the relevant modules, and
   other modules do not need to change to conform)
 - What is more key?  Communication, information content, contracts,
   details?
-- [[https://en.wikipedia.org/wiki/Abstraction_principle_(computer_programming)][Abstraction principle]]
-  - Reduce duplication of information
   - [[https://en.wikipedia.org/wiki/Don%2527t_repeat_yourself][Don't repeat yourself]]
 - [[https://simplyphilosophy.org/study/aristotles-definitions/][Aristotle & theory of definitions]]
   - this isn't right.  I need to find the quote in the Durant book

hugo_blag/content/old_crap/2008-03-24-workfest-with-christian-appalachian-project-day-one.markdown

@@ -14,79 +14,14 @@ tags:
 - workfest
 ---
 
-
+{{< load-photoswipe >}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 It's quite different.
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 People are open. Their groups are open.
 
-
-
-
 It's a difference between being pushed away from people constantly, and being pushed toward them, so one does not constantly need to fight back against the repulsion.
 
-
 Maybe it's the types of people. Maybe it's the environment. But it's wonderful. Maybe similar to the way I felt in Seattle when I visited there last year.
 
 Months in Cincinnati and I might never meet a new friend... hours here and I've made several already.
@@ -98,6 +33,8 @@ They're out of that context. They look like they're in the context they belong.
 
 My Canon camera is probably almost out of battery power, despite efforts. I should have brought the charger. But I have the Kodak too. Maybe it will show some of the picturesque terrain.
 
-[![Camp AJ from one angle (full size)](/wp_old/2008/03/img_6262.jpg)](/wp_old/2008/03/img_6262.jpg)[![Arriving at Camp AJ (full size)](/wp_old/2008/03/img_6253.jpg)](/wp_old/2008/03/img_6253.jpg)[![Playground and climbing wall near entrance road](/wp_old/2008/03/img_6265.jpg)](/wp_old/2008/03/img_6265.jpg)
+{{< figure src="/wp_old/2008/03/img_6262.jpg" caption="Camp AJ from one angle">}}
+{{< figure src="/wp_old/2008/03/img_6253.jpg" caption="Arriving at Camp AJ">}}
+{{< figure src="/wp_old/2008/03/img_6265.jpg" caption="Playground and climbing wall near entrance road">}}
 
 (Later note: That is [Camp AJ, 2549 Sand Lick Rd, McKee, KY 40447](https://www.google.com/maps/dir/Cincinnati,+Ohio/Berea,+Kentucky/Camp+AJ,+2549+Sand+Lick+Rd,+McKee,+KY+40447/@37.488284,-84.0115257,16z/data=!4m19!4m18!1m5!1m1!1s0x884051b1de3821f9:0x69fb7e8be4c09317!2m2!1d-84.5120196!2d39.1031182!1m5!1m1!1s0x8842e18aa160b579:0xd32df1c2b2266672!2m2!1d-84.2963223!2d37.568694!1m5!1m1!1s0x884315ccbd7d479b:0x28e72c53d5d60a9d!2m2!1d-84.00718!2d37.4887543).)

hugo_blag/content/posts/2014-02-06-hello-world.md

@@ -1,5 +1,5 @@
 ---
-title: Hello, World (from Jekyll) (then from Hakyll) (then from Hugo)
+title: Hello, World (from Wordpress, then Jekyll, then Hakyll, then Hugo)
 author: Chris Hodapp
 date: "2014-02-06"
 ---

hugo_blag/content/posts/2016-10-12-pi-pan-tilt-3.md

@@ -169,10 +169,10 @@ image.
 
 Here's another comparison, this time a 1:1 crop from the center of an
 image (shot at 40mm with [this lens][12-40mm], whose Amazon price
-mysteriously is now $146 instead of the $23 I actually paid).  Click
+mysteriously is now <span>$</span>146 instead of the <span>$</span>23
-the preview for a lossless PNG view, as JPEG might eat some of the
+I actually paid).  Click the preview for a lossless PNG view, as JPEG
-finer details, or [here][leaves-full] for the full JPEG file
+might eat some of the finer details, or [here][leaves-full] for the
-(including raw, if you want to look around).
+full JPEG file (including raw, if you want to look around).
 
 [![JPEG & raw comparison](../assets_external/2016-10-12-pi-pan-tilt-3/leaves_test_preview.jpg){width=100%}](../assets_external/2016-10-12-pi-pan-tilt-3/leaves_test.png)
 

hugo_blag/content/posts/2018-04-13-opinions-go.org

@@ -6,6 +6,7 @@ tags:
 - technobabble
 - go
 - golang
+toc: true
 ---
 
 # TODO: Link to my asyncio post
@@ -101,7 +102,7 @@ polymorphism.)
 My objections aren't unique. [[https://www.teamten.com/lawrence/writings/why-i-dont-like-go.html][Ten Reasons Why I Don't Like Golang]] and
 [[http://yager.io/programming/go.html][Why Go Is Not Good]] have criticisms I can't really disagree with.
 (Also, did you know someone put together
-https://github.com/ksimka/go-is-not-good?)
+[[https://github.com/ksimka/go-is-not-good][https://github.com/ksimka/go-is-not-good]]?)
 
 All in all, though, Go is a procedural/imperative language with a lot
 of good design in language and tooling... which is great, if it's only

hugo_blag/layouts/shortcodes/figure.html

@@ -0,0 +1,29 @@
+<!--
+Put this file in /layouts/shortcodes/figure.html
+NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
+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 -}}
+<!-- use either src or link-thumb for thumbnail image -->
+{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
+<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
+  <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+    <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
+      <img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
+    </div>
+    {{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+      <figcaption>
+        {{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
+        {{- if or (.Get "caption") (.Get "attr")}}
+          <p>
+            {{- .Get "caption" -}}
+            {{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
+          </p>
+        {{- end }}
+      </figcaption>
+    {{- end }}
+  </figure>
+</div>

hugo_blag/layouts/shortcodes/gallery.html

@@ -0,0 +1,41 @@
+<!--
+Put this file in /layouts/shortcodes/gallery.html
+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 := .Site.BaseURL }}
+<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
+	{{- with (.Get "dir") -}}
+		<!-- If a directory was specified, generate figures for all of the images in the directory -->
+		{{- $files := readDir (print "/static/" .) }}
+		{{- range $files -}}
+			<!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
+			{{- $thumbext := $.Get "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) }}
+				{{- $caption :=  .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
+				{{- $linkURL := print $baseURL ($.Get "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 ($.Get "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>{{ $caption }}</p>
+			      </figcaption>
+				    <a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
+				  </figure>
+				</div>
+			{{- end }}
+		{{- end }}
+	{{- else -}}
+		<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
+	  {{ .Inner }}
+	{{- end }}
+</div>

hugo_blag/layouts/shortcodes/load-photoswipe.html

@@ -0,0 +1,71 @@
+<!--
+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
+-->
+<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" />
+<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 }}

hugo_blag/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 */
+}
+

hugo_blag/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();
+		});	
+	});
+});