Action: Gallery
Compatible with: R6.1 Current version: 0.10 Credits: WikiAdmin |
{{gallery}}
1. Description
Gallery action allows you to create a photo gallery with small pictures, linked to larger versions. Gallery uses standard WackoWiki file model.
2. Requirements
- PHP 8.0 and GD 2.0+
- PHP Thumb Library
- folder
file/thumb
3. Configuration
- Admin Panel settings
-
img_create_thumbnail
-
img_max_thumb_width
-
- make the tumbs folder writable
chmod 0755 file/thumb/
- router.conf: add photoswipe
diff --git a/src/config/router.conf b/src/config/router.conf --- a/src/config/router.conf +++ b/src/config/router.conf @@ -108,8 +108,9 @@ `^(theme/{}/css|theme/_common|admin/style)/{}$` _ok! // css `^image/(wikiedit/)?{}$` _ok! // icons `^theme/default/icon/{}$` _ok! // icons -`^js/(lang/)?{}$` _ok! // js +`^js/(lang/|photoswipe/)?{}$` _ok! // js `^file/(global/){}$` _ok! // global uploads `^setup/(image|css)/{}$` _ok! unlock=1 // setup inlines `^xml/{}$` _ok! age=0 // feeds
Re-add this change after each Upgrade
Do not forget to add/merge the additional folder to the router.conf after each WackoWiki upgrade, otherwise the router will ignore the folder and the script will not load.
`^js/(lang/|photoswipe/)?{}$` _ok!
3.1. PhotoSwipe
see gallery.php
// Include Lightbox import PhotoSwipeLightbox from '{$this->db->base_path}js/photoswipe/photoswipe-lightbox.esm.min.js'; import PhotoSwipeDynamicCaption from '{$this->db->base_path}js/photoswipe/photoswipe-dynamic-caption-plugin.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ // may select multiple "galleries" gallery: '#gallery--$param_token', // Elements within gallery (slides) children: 'a', // setup PhotoSwipe Core dynamic import pswpModule: () => import('{$this->db->base_path}js/photoswipe/photoswipe.esm.min.js') }); const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, { // Plugins options, for example: type: 'auto', captionContent: '.pswp-caption-content', }); lightbox.init();
4. Download
- Repo for R6.1 (switch branch for previous versions)
- action/gallery.php (add here:
action/
) - action/template/gallery.tpl (add here:
action/template/
)
- action/gallery.php (add here:
-
PHP Thumb Library (add here:(part of distribution)lib/phpthumb/
) - optional (for lightbox)
- photoswipe_5.3.5.zip (add here:
js/photoswipe/
)- PhotoSwipe — JavaScript image gallery and lightbox
- photoswipe.css
- photoswipe.esm.min.js
- photoswipe-lightbox.esm.min.js
- Caption plugin
- photoswipe-dynamic-caption-plugin.css
- photoswipe-dynamic-caption-plugin.esm.min.js
- PhotoSwipe — JavaScript image gallery and lightbox
- photoswipe_5.3.5.zip (add here:
5. Installation
- Copy gallery.php to action/ directory on your Wacko.
- Copy gallery.tpl to action/template/ directory on your Wacko.
- Unpack and copy PhotoSwipe to js/photoswipe/ directory
6. Using
Then you call action {{gallery}}
with params:
[page = "page_tag"]
- call image from another page[global = 1]
- show global files[perrow = <Number of images per rows> ]
(default = 3)[caption = 1|2]
- show 1 file descriptions, 2 file caption[title = "Gallery"]
- album title[target = 1|2]
- show large images without page (0
- inline (default) , 1
- image, 2
- lightbox)[nomark = 1]
- hide external border[table = 1]
- pictures in table[order = "time|name_desc|size|size_desc|ext"]
[owner = "UserName"]
[max = number]
Set the parameter target=2
to use the lightbox.
The lightbox only works if the user allows JavaScript in their browser, otherwise it would load the image directly in a new tab.
6.1. Example
{{gallery table=1 target=2 title="local pictures"}}
6.2. local usage of repository
symlink the gallery action from community action folder in wacko/action and wacko/action/template folder in repo
ln -s ../../community/action/gallery.php gallery.php ln -s ../../../community/action/template/gallery.tpl gallery.tpl
7. Changelog
0.1 Intitial version
0.7 Updated to work with R.6.1 (PHP 8.0, Null coalescing assignment operator)
0.8 added order="name_desc"
and changed time field names
0.9 added support for PhotoSwipe
8. ToDo
- add it to the core
9. Links
9.1. Alternatives
Others