Add photoswipe captions

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

layouts/partials/components/image/index.html

@@ -3,8 +3,10 @@
   <figure class="captioned-image lightbox">
     <a
       href="{{- .RelPermalink -}}"
+      data-pswp-src="{{- .RelPermalink -}}"
       data-pswp-width="{{- .Width -}}"
       data-pswp-height="{{- .Height -}}"
+      class="pswp-image"
     >
       <img
         src="{{- .RelPermalink -}}"

layouts/partials/gallery/list.html

@@ -2,13 +2,16 @@
   <div class="grid-sizer"></div>
   {{ range sort .Pages "Date" "desc" }}
     {{ if not .Params.private }}
+      {{ $page := . }}
       {{ $imageData := partial "components/image/reflect.html" .Params.hero }}
       {{ with $imageData.image }}
         <div class="image grid-item">
           <a
-            href="{{- .RelPermalink -}}"
+            href="{{- $page.RelPermalink -}}"
+            data-pswp-src="{{- .RelPermalink -}}"
             data-pswp-width="{{- .Width -}}"
             data-pswp-height="{{- .Height -}}"
+            class="pswp-image"
           >
             <img
               src="{{- .RelPermalink -}}"
@@ -19,6 +22,16 @@
               {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
             />
           </a>
+          <div class="pswp-caption-content">
+            <div>
+              {{ upper $page.Title }}
+              <div class="meta">
+                {{ $page.Date | time.Format ":date_medium" }}
+                &middot;
+                <a href="{{- $page.RelPermalink -}}">View Post</a>
+              </div>
+            </div>
+          </div>
         </div>
       {{ end }}
     {{ end }}