first tests
fails with photoswipe...
This commit is contained in:
parent
ef34a661c6
commit
1f166971b2
GPG key ID:
0B5787DB23049C45
11 changed files with 450 additions and 22 deletions
159
assets/css/hugo-easy-gallery.css
Normal file
159
assets/css/hugo-easy-gallery.css
Normal file
|
|
@ -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 */
|
||||||
|
}
|
||||||
|
|
||||||
80
assets/js/load-photoswipe.js
Normal file
80
assets/js/load-photoswipe.js
Normal file
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
BIN
content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.1.png
(Stored with Git LFS)
Normal file
BIN
content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.1.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.2.png
(Stored with Git LFS)
Normal file
BIN
content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.2.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.3.png
(Stored with Git LFS)
Normal file
BIN
content/posts/2025/75-winlink-on-android-with-woad/img1/session.packet.3.png
(Stored with Git LFS)
Normal file
Binary file not shown.
|
|
@ -35,6 +35,8 @@ I assume the app is all set up with basic information like CALLSIGN, Grid, etc.
|
||||||
|
|
||||||
## Packet connection
|
## Packet connection
|
||||||
|
|
||||||
|
{{< gallery dir="img1" />}}
|
||||||
|
|
||||||
I love simple and small configurations (mostly) and this one is really small.
|
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>
|
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
|
with me -- usually an Icom ID-52. Together with a Mobilinkd
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,48 @@
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-xs text-neutral-500 dark:text-neutral-400">
|
<p class="text-xs text-neutral-500 dark:text-neutral-400">
|
||||||
Served> with <a
|
Served> with
|
||||||
class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://archlinux.org/"
|
<a
|
||||||
target="_blank" rel="noopener noreferrer">Arch Linux</a> and <a
|
class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
|
||||||
class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://httpd.apache.org/"
|
href="https://archlinux.org/"
|
||||||
target="_blank" rel="noopener noreferrer">Apache httpd</a> ┊
|
target="_blank"
|
||||||
<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="/feed.xml"
|
rel="noopener noreferrer"
|
||||||
target="_blank" rel="noopener">Atom feed</a> ┊
|
>Arch Linux</a
|
||||||
<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="/feed.json"
|
>
|
||||||
target="_blank" rel="noopener">Json feed</a>
|
and
|
||||||
</p>
|
<a
|
||||||
</div>
|
class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
|
||||||
|
href="https://httpd.apache.org/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>Apache httpd</a
|
||||||
|
>
|
||||||
|
┊
|
||||||
|
<a
|
||||||
|
class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
|
||||||
|
href="/feed.xml"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>Atom feed</a
|
||||||
|
>
|
||||||
|
┊
|
||||||
|
<a
|
||||||
|
class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
|
||||||
|
href="/feed.json"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>Json feed</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,14 @@
|
||||||
{{- if eq .Site.BaseURL "https://oe7drt.com/" }}
|
{{- if eq .Site.BaseURL "https://oe7drt.com/" }} {{ partial
|
||||||
{{ partial "plausible_head.html" . }}
|
"plausible_head.html" . }} {{- end }}
|
||||||
{{- end }}
|
|
||||||
<meta name="fediverse:creator" content="@oe7drt@mastodon.radio" />
|
<meta name="fediverse:creator" content="@oe7drt@mastodon.radio" />
|
||||||
|
|
||||||
{{ with resources.Get "js/lightbox.js" }} {{ if hugo.IsDevelopment }} {{ with .
|
<script
|
||||||
| js.Build }}
|
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
|
<script
|
||||||
defer
|
defer
|
||||||
type="text/javascript"
|
type="text/javascript"
|
||||||
|
|
@ -13,7 +17,7 @@
|
||||||
data-copied="Copied"
|
data-copied="Copied"
|
||||||
></script>
|
></script>
|
||||||
{{ end }} {{ else }} {{ $opts := (dict "minify" true "targetPath"
|
{{ end }} {{ else }} {{ $opts := (dict "minify" true "targetPath"
|
||||||
"js/lightbox.js") }} {{ with . | js.Build $opts | fingerprint }}
|
"js/load-photoswipe.js") }} {{ with . | js.Build $opts | fingerprint }}
|
||||||
<script
|
<script
|
||||||
defer
|
defer
|
||||||
type="text/javascript"
|
type="text/javascript"
|
||||||
|
|
@ -22,8 +26,8 @@
|
||||||
data-copied="Copied"
|
data-copied="Copied"
|
||||||
integrity="{{ .Data.Integrity }}"
|
integrity="{{ .Data.Integrity }}"
|
||||||
></script>
|
></script>
|
||||||
{{ end }} {{ end }} {{ end }} {{ with resources.Get "css/lightbox.css" }} {{ if
|
{{ end }} {{ end }} {{ end }} {{ with resources.Get "css/hugo-easy-gallery.css"
|
||||||
hugo.IsDevelopment }} {{ with . }}
|
}} {{ if hugo.IsDevelopment }} {{ with . }}
|
||||||
<link
|
<link
|
||||||
type="text/css"
|
type="text/css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
|
|
|
||||||
26
layouts/shortcodes/figure.html
Normal file
26
layouts/shortcodes/figure.html
Normal file
|
|
@ -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>
|
||||||
41
layouts/shortcodes/gallery.html
Normal file
41
layouts/shortcodes/gallery.html
Normal file
|
|
@ -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>
|
||||||
75
layouts/shortcodes/load-photoswipe.html
Normal file
75
layouts/shortcodes/load-photoswipe.html
Normal file
|
|
@ -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 }}
|
||||||
Loading…
Add table
Reference in a new issue