{{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

1. PHP 8.0 and GD 2.0+
2. PHP Thumb Library
3. folder file/thumb

3. Configuration

1. Admin Panel settings
   1. img_create_thumbnail
   2. img_max_thumb_width
2. make the tumbs folder writable chmod 0755 file/thumb/
3. 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

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

1. Repo for R6.1 (switch branch for previous versions)
   1. action/gallery.php (add here: action/)
   2. action/template/gallery.tpl (add here: action/template/)
2. PHP Thumb Library (add here: lib/phpthumb/) (part of distribution)
3. optional (for lightbox)
   1. photoswipe_5.3.5.zip (add here: js/photoswipe/)
      1. PhotoSwipe — JavaScript image gallery and lightbox
         1. photoswipe.css
         2. photoswipe.esm.min.js
         3. photoswipe-lightbox.esm.min.js
      2. Caption plugin
         1. photoswipe-dynamic-caption-plugin.css
         2. photoswipe-dynamic-caption-plugin.esm.min.js

5. Installation

1. Copy gallery.php to action/ directory on your Wacko.
2. Copy gallery.tpl to action/template/ directory on your Wacko.
3. Unpack and copy PhotoSwipe to js/photoswipe/ directory

6. Using

Then you call action {{gallery}} with params:

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"}}

-> Example for Testing

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

1. add it to the core

9. Links

1. PhotoSwipe [MIT License]
   • PhotoSwipe Documentation
   • PhotoSwipe Dynamic caption plugin

9.1. Alternatives

Others

1. https://github.com/sachinchoolur/lightGallery [GPL3]