first tests

fails with photoswipe...
2025-02-15 10:05:23 +01:00
15 changed files with 468 additions and 93 deletions
--- a/assets/css/hugo-easy-gallery.css
+++ b/assets/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 */
+}
+
--- a/assets/js/load-photoswipe.js
+++ b/assets/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();
+		});	
+	});
+});
--- a/content/links/index.md
+++ b/content/links/index.md
@ -38,6 +38,10 @@ and PDF files of the links too.
 [opengist](https://gist.oe7drt.net/)
 : Selfhosted version of Github gists where I save some random snippets.

+[LibreTranslate](https://translate.oe7drt.net/)
+: I was testing Mastodon again (this time on my local server at home) in a virtual machine.
+Within that I created another user that runs an instance of LibreTranslate.
+
 [Mastodon](https://social.oe7drt.net/)
 : I do some testing on this private instance every now and then and if you need an instance
 to test out a few things feel free to create users over there. It is currently subscribed
--- a/content/notes/hamradio-computer/index.md
+++ b/content/notes/hamradio-computer/index.md
@ -13,13 +13,6 @@ tags:
  - archlinux
  - systemd
  - beelink
-  - WoAD
-  - radiomail
-  - VARA HF
-  - VARA FM
-  - Packet Radio
-  - Winlink
-  - wine

 #showDate: false
 showReadingTime: false
@ -82,17 +75,6 @@ to reboot without su

 /etc/polkit-1/rules.d/49-nopasswd_global.rules

-```
-/* Allow members of the wheel group to execute any actions
- * without password authentication, similar to "sudo NOPASSWD:"
- */
-polkit.addRule(function(action, subject) {
-    if (subject.isInGroup("wheel")) {
-        return polkit.Result.YES;
-    }
-});
-```
-
 ### passwordless ssh login

 ssh-add -L > .ssh/authorized_keys
@ -115,8 +97,6 @@ can also be done on most installation media that use grub by hitting

 ### Wine

-#### Default (Arch)
-
 Windows tools will require wine, so we install this right now

 paru -S wine
@ -128,9 +108,6 @@ paru -S lib32-gnutls
 export WINEARCH=win32
 export WINEPREFIX=/home/dominic/.wine-winlink

-you can also include these two lines in a .bash_profile or similar.
-I use this sometimes in my `~/.zshrc.local` as i include this already.
-
 since we exported WINEPREFIX we can omit the use of it in THIS SESSION
 (this terminal window). if you use another you have to export the variable
 again or prefix any command with
@ -145,18 +122,14 @@ winetricks -q allfonts

 adding some .NET frameworks we will mostly use/need

-```
 winetricks -q dotnet35sp1
 winetricks vb6run
 winetricks vcrun2015
-```

 optional if errors

-```
 winetricks -q dotnet40
 winetricks -q dotnet46
-```

 registering notepad.exe as default application for logfiles

@ -164,18 +137,6 @@ create a backup of the wine installation

 tar -cJf wine-backup\_$(date +%Y-%m-%d-%H-%M-%S)\_initial-setup.tar.xz .wine-winlink

-#### Debian
-
-```
-sudo dpkg --add-architecture i386
-sudo apt update
-sudo apt install wine wine32 fonts-wine
-```
-
-```
-sudo apt install gcc-multilib g++-multilib
-```
-
 ### VARA tools

 vara hf, vara fm
--- a/content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.1.png
+++ b/content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.1.png
--- a/content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.2.png
+++ b/content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.2.png
--- a/content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.3.png
+++ b/content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.3.png
--- a/content/posts/2025/75-winlink-on-android-with-woad/index.md
+++ b/content/posts/2025/75-winlink-on-android-with-woad/index.md
@ -35,6 +35,8 @@ I assume the app is all set up with basic information like CALLSIGN, Grid, etc.

 ## Packet connection

+{{< gallery dir="img1" />}}
+
 I love simple and small configurations (mostly) and this one is really small.
 When I'm out hiking I usually have an <abbr title="handheld transceiver">HT</abbr>
 with me -- usually an Icom ID-52. Together with a Mobilinkd
--- a/gmid.conf
+++ b/gmid.conf
@ -1,21 +0,0 @@
-# create certs for localhost
-# openssl req -x509 -newkey rsa:4096 -nodes -keyout gmid.key \
-#   -out gmid.pem -days 365 -subj "/CN=localhost"
-
-protocols "tlsv1.3"
-
-types {
-	# include "/usr/share/misc/mime.types"
-	include "/usr/share/doc/gmid/mime.types"
-}
-
-server "localhost" {
-  listen on * port 1965
-
-  cert  "/home/dominic/sites/oe7drt-website/gmid.pem"
-  key  "/home/dominic/sites/oe7drt-website/gmid.key"
-  # root "/srv/sites/oe7drt-gemini"
-  root "/home/dominic/sites/oe7drt-website/public"
-
-  lang "en"
-}
--- a/layouts/partials/extend-footer.html
+++ b/layouts/partials/extend-footer.html
@ -36,40 +36,13 @@
    </p>
  </div>
 </div>
-
-{{ with resources.Get "js/lightbox.js" }} {{ if hugo.IsDevelopment }} {{ with .
-| js.Build }}
 <script
-  defer
-  type="text/javascript"
-  src="{{ .RelPermalink }}"
-  data-copy="Copy"
-  data-copied="Copied"
+  src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js"
+  integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc="
+  crossorigin="anonymous"
 ></script>
-{{ end }} {{ else }} {{ $opts := (dict "minify" true "targetPath"
-"js/lightbox.js") }} {{ with . | js.Build $opts | fingerprint }}
 <script
-  defer
-  type="text/javascript"
-  src="{{ .RelPermalink }}"
-  data-copy="Copy"
-  data-copied="Copied"
-  integrity="{{ .Data.Integrity }}"
+  src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js"
+  integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk="
+  crossorigin="anonymous"
 ></script>
-{{ end }} {{ end }} {{ end }} {{ with resources.Get "css/lightbox.css" }} {{ if
-hugo.IsDevelopment }} {{ with . }}
-<link
-  type="text/css"
-  rel="stylesheet"
-  media="screen,print"
-  href="{{ .RelPermalink }}"
-/>
-{{ end }} {{ else }} {{ with . | fingerprint }}
-<link
-  type="text/css"
-  rel="stylesheet"
-  media="screen,print"
-  href="{{ .RelPermalink }}"
-  integrity="{{ .Data.Integrity }}"
-/>
-{{ end }} {{ end }} {{ end }}
--- a/layouts/partials/extend-head.html
+++ b/layouts/partials/extend-head.html
@ -2,6 +2,48 @@
 "plausible_head.html" . }} {{- end }}
 <meta name="fediverse:creator" content="@oe7drt@mastodon.radio" />

+<script
+  src="https://code.jquery.com/jquery-1.12.4.min.js"
+  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
+  crossorigin="anonymous"
+></script>
+{{ with resources.Get "js/load-photoswipe.js" }} {{ if hugo.IsDevelopment }} {{
+with . | js.Build }}
+<script
+  defer
+  type="text/javascript"
+  src="{{ .RelPermalink }}"
+  data-copy="Copy"
+  data-copied="Copied"
+></script>
+{{ end }} {{ else }} {{ $opts := (dict "minify" true "targetPath"
+"js/load-photoswipe.js") }} {{ with . | js.Build $opts | fingerprint }}
+<script
+  defer
+  type="text/javascript"
+  src="{{ .RelPermalink }}"
+  data-copy="Copy"
+  data-copied="Copied"
+  integrity="{{ .Data.Integrity }}"
+></script>
+{{ end }} {{ end }} {{ end }} {{ with resources.Get "css/hugo-easy-gallery.css"
+}} {{ if hugo.IsDevelopment }} {{ with . }}
+<link
+  type="text/css"
+  rel="stylesheet"
+  media="screen,print"
+  href="{{ .RelPermalink }}"
+/>
+{{ end }} {{ else }} {{ with . | fingerprint }}
+<link
+  type="text/css"
+  rel="stylesheet"
+  media="screen,print"
+  href="{{ .RelPermalink }}"
+  integrity="{{ .Data.Integrity }}"
+/>
+{{ end }} {{ end }} {{ end }}
+
 <meta
  http-equiv="onion-location"
  content="http://5uxkejb6la7olhncaotybxrscmdlbxwy64ucuyrum4tsgfuoxbyav2qd.onion"
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@ -0,0 +1,26 @@
+<!--
+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/
+-->
+<!-- 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="{{ . | relURL }}" 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>
--- a/layouts/shortcodes/gallery.html
+++ b/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" | relURL }} />{{ 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 (path.Join "content/" (path.Dir $.Page.File.Path) "/" .) }}
+		{{- range $files -}}
+			<!-- skip files that aren't images, or that include 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|webp|avif|jxl)" }}<!-- is the current file an image? -->
+			{{- if and $isimg (not $isthumb) }}
+				{{- $caption :=  .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
+				{{- $linkURL := print $baseURL (path.Dir $.Page.File.Path) "/" ($.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 (path.Dir $.Page.File.Path) "/" ($.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>
--- a/layouts/shortcodes/image-gallery.html
+++ b/layouts/shortcodes/image-gallery.html
@ -0,0 +1,24 @@
+<style>
+    .image-gallery {overflow: auto; margin-left: -1%!important;}
+    .image-gallery li {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}
+    .image-gallery li a {text-align: center; text-decoration: none!important; color: #777;}
+    .image-gallery li a span {display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0;}
+    .image-gallery li a img {width: 100%; display: block;}
+</style>
+<!-- TODO: remove the /static part 4 lines below because I want to include them from the actual directory -->
+
+{{ $dir := string (.Get "gallery_dir") }}
+<ul class="image-gallery">
+{{ range (readDir (print "/static" $dir)) }}
+  {{- $image := resources.Get (printf "%s/%s" $dir .Name) -}}
+  {{- $imageurl := printf "%s/%s" $dir .Name -}}
+  {{- $imagetitle := index (split .Name ".") 0 -}}
+    <li>
+      <a href="{{ ($image.Fit "1600x1600 q50").Permalink }}" title="{{ $imagetitle }}" class="lightbox-image">
+        <img src="{{ ($image.Fill "300x300 q50").Permalink }}" alt="{{ $imagetitle }}" title="{{ $imagetitle }}">
+        <span>{{ $imagetitle }}</span>
+      </a>
+    </li>
+
+{{ end }}
+</ul>
--- a/layouts/shortcodes/load-photoswipe.html
+++ b/layouts/shortcodes/load-photoswipe.html
@ -0,0 +1,75 @@
+<!--
+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 }}