Add ability to selfhost the js and css files

README.md

@@ -54,12 +54,16 @@ Put files in following places:
 - /static/js/load-photoswipe.js
 - /static/css/hugo-easy-gallery.css
 
-**NB `load-photoswipe.html` loads jQuery from `cdnjs.cloudflare.com`.**
+If you want, you could (depending on a front matter param) conditionally load `load-photoswipe.html` or its contents from the footer of your template.  But I've consciously chosen to load PhotoSwipe using a shortcode so that you don't have to modify your template if you don't want to.
 
-- If your template already loads jQuery in the header, you can delete the jQuery link in `load-photoswipe.html`.
-- If your template already loads jQuery in the footer,  you should `load-photoswipe.js` from the footer instead of in `load-photoswipe.html`.
+### Self-hosting the js and css libraries (GDPR compliance)
 
-If you want, you could (depending on a front matter param) conditionally load `load-photoswipe.html` or its contents from the footer of your template.  But I've consciously chosen to load PhotoSwipe using a shortcode so that you don't have to modify your template if you don't want to.
+if you want to self-host the jQuery and Photoswipe js and css libraries, you can do so by setting the `selfHosted` param to `true` in your site config file:
+
+```toml
+[params]
+  selfHosted = true
+```
 
 ## Theme integration
 
@@ -71,12 +75,9 @@ Rename `/layouts/shortcodes/load-photoswipe-theme.html` to `/layouts/shortcodes/
 
 Add the following lines to the footer of your template, just before `</body>`:
 
-(Omit the jQuery line if jQuery is already loaded elsewhere in your template; just make sure that jQuery is loaded **before** this code.)
-
 ```html
 <!-- 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>

layouts/shortcodes/load-photoswipe-theme.html

@@ -7,19 +7,19 @@
 {{ 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 -->
+{{- if .Site.Params.selfHosted -}}
+<link rel="stylesheet" href="/css/photoswipe/photoswipe.min.css" />
+<link rel="stylesheet" href="/css/photoswipe/default-skin.min.css" />
+{{- else -}}
 <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" />
+{{- end -}}
+
 <!-- 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>

layouts/shortcodes/load-photoswipe.html

@@ -7,19 +7,20 @@
 {{ 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" | relURL }}></script>
 
 <!-- Photoswipe css/js libraries -->
+{{- if .Site.Params.selfHosted -}}
+<link rel="stylesheet" href="/css/photoswipe/photoswipe.min.css" />
+<link rel="stylesheet" href="/css/photoswipe/default-skin.min.css" />
+<script src="/js/photoswipe/photoswipe.min.js"></script>
+<script src="/js/photoswipe/photoswipe-ui-default.min.js"></script>
+{{- else -}}
 <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>
+{{- end -}}
 
 <!-- Root element of PhotoSwipe. Must have class pswp. -->
 <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

static/css/hugo-easy-gallery.css

@@ -9,7 +9,7 @@ Grid Layout Styles
 */
 .gallery {
     overflow: hidden;
-    margin: 10px;
+    margin: 1rem;
     max-width: 768px;
 }
 .gallery .box {
@@ -59,13 +59,17 @@ figure styles
 figure {
     position:relative; /* purely to allow absolution positioning of figcaption */
     overflow: hidden;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
 }
 .gallery figure {
     position: absolute;
-    left: 5px;
-    right: 5px;
-    top: 5px;
-    bottom: 5px;
+    left: .3rem;
+    right: .3rem;
+    top: .3rem;
+    bottom: .3rem;
 }
 .gallery.hover-effect-grow figure:hover {
     transform: scale(1.05);
@@ -74,10 +78,10 @@ figure {
     transform: scale(0.95);
 }
 .gallery.hover-effect-slidedown figure:hover {
-    transform: translateY(5px);
+    transform: translateY(.3rem);
 }
 .gallery.hover-effect-slideup figure:hover {
-    transform: translateY(-5px);
+    transform: translateY(-.3rem);
 }
 
 /*
@@ -132,11 +136,11 @@ figcaption styles
 .gallery.caption-position-center figcaption,
 .fancy-figure.caption-position-center figcaption {
     top: 0;
-    padding: 40% 5px;
+    padding: 40% .3rem;
 }
 .gallery.caption-position-bottom figcaption,
 .fancy-figure.caption-position-bottom figcaption {
-    padding: 5px;
+    padding: .3rem;
 }
 .gallery.caption-effect-fade figure:not(:hover) figcaption,
 .gallery.caption-effect-appear figure:not(:hover) figcaption,