simon/smeagol
1
0
Fork 0
mirror of https://github.com/journeyman-cc/smeagol.git synced 2026-04-12 18:05:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplified syntax for Photoswipe galleries now works

Browse source
This commit is contained in:
Simon Brooke 2020-02-11 13:14:36 +00:00
parent fc4dcdb5d3
commit d2e20162ef
10 changed files with 283 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

47
resources/public/content/Example gallery.md
View file

@ -1,26 +1,3 @@
## The Gallery
This page holds an example Photoswipe gallery.
```pswp
{
slides: [
{ src: 'content/uploads/g1.jpg', w: 2592, h:1944,
title: 'Frost on a gate, Laurieston' },
{ src: 'content/uploads/g2.jpg', w: 2560, h:1920,
title: 'Feathered crystals on snow surface, Taliesin' },
{ src: 'content/uploads/g3.jpg', w: 2560, h:1920,
title: 'Feathered snow on log, Taliesin' },
{ src: 'content/uploads/g4.jpg', w: 2560, h:1920,
title: 'Crystaline growth on seed head, Taliesin' }],
options: {
timeToIdle: 100
},
openImmediately: true
}
```
## How this works
The specification for this gallery is as follows:
@ -57,3 +34,27 @@ Optional. The value of `options` is a JSON object [as documented here](https://p
### openImmediately
Optional. If the value of `openImmediately` is `true`, the gallery will open immediately, covering the whole page. If false, only a button with the label 'Open the gallery' will be shown. Selecting this button will cause the gallery to open.
## The Gallery
This page holds an example Photoswipe gallery.
```pswp
{
slides: [
{ src: 'content/uploads/g1.jpg', w: 2592, h:1944,
title: 'Frost on a gate, Laurieston' },
{ src: 'content/uploads/g2.jpg', w: 2560, h:1920,
title: 'Feathered crystals on snow surface, Taliesin' },
{ src: 'content/uploads/g3.jpg', w: 2560, h:1920,
title: 'Feathered snow on log, Taliesin' },
{ src: 'content/uploads/g4.jpg', w: 2560, h:1920,
title: 'Crystaline growth on seed head, Taliesin' }],
options: {
timeToIdle: 100
},
openImmediately: true
}
```

5
resources/public/content/Extensible Markup.md
View file

@ -68,9 +68,8 @@ data/classes.mermaid
## Photoswipe galleries
Not so much a formatter, this is an extension to allow you to embed image galleries in your markdown. To specify a gallery, use three backticks followed by `pswp`, followed on the following lines by a Photoswipe specification in [JSON](https://www.json.org/json-en.html)
followed by three backticks on a line by themselves. There is an [[Example gallery]] so that you can see how this works.
Not so much a formatter, this is an extension to allow you to embed image galleries in your markdown. To specify a gallery, use three backticks followed by `pswp`, followed on the following lines by a [Photoswipe](https://photoswipe.com/documentation/getting-started.html) specification in [JSON](https://www.json.org/json-en.html)
followed by three backticks on a line by themselves. There is an [[Example gallery]] with the full PhotoSwipe configuration, and a [[Simplified example gallery]] using a much simpler syntax, so that you can see how this works.
## Writing your own custom formatters

24
resources/public/content/Simplified example gallery.md Normal file
View file

@ -0,0 +1,24 @@
## How this works
The specification for this gallery is as follows:
```
![Frost on a gate, Laurieston](content/uploads/g1.jpg)
![Feathered crystals on snow surface, Taliesin](content/uploads/g2.jpg)
![Feathered snow on log, Taliesin](content/uploads/g3.jpg)
![Crystaline growth on seed head, Taliesin](content/uploads/g4.jpg)
```
That's all there is to it - a sequence of image links just as you'd write them anywhere else in the wiki.
## The Gallery
This page holds another example Photoswipe gallery, this time using a simpler, Markdown-based specification. Processing this specification takes more work than the full syntax used in the other [Example gallery], so the gallery may be slower to load; but it's much easier to configure.
```pswp
![Frost on a gate, Laurieston](content/uploads/g1.jpg)
![Feathered crystals on snow surface, Taliesin](content/uploads/g2.jpg)
![Feathered snow on log, Taliesin](content/uploads/g3.jpg)
![Crystaline growth on seed head, Taliesin](content/uploads/g4.jpg)
```