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.


gallery action with thumbnails

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


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

  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:


[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.
gallery action with lightbox and caption
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]

9.1. Alternatives

Others

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

Show Files (3 files)

Read comment (1 comment)