WackoWiki: Action: Gallery

https://wackowiki.org/doc     Version: 14.05.2022 22:01
Compatible with: R6.1
Current version: 0.9
Credits: WikiAdmin[link1]


{{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[link2] 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/wacko/config/router.conf b/wacko/config/router.conf
--- a/wacko/config/router.conf
+++ b/wacko/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!

4. Download

  1. Repo for R6.1 (switch branch for previous versions)
    1. action/gallery.php[link3] (add here: action/)
    2. action/template/gallery.tpl[link4] (add here: action/template/)
  2. PHP Thumb Library[link5] (add here: lib/phpthumb/) (part of distribution)
  3. optional (for lightbox)
    1. photoswipe_5.2.7.zip[link6] (add here: js/photoswipe/)
      1. PhotoSwipe[link7] — JavaScript image gallery and lightbox
        1. photoswipe.css
        2. photoswipe.esm.min.js
        3. photoswipe-lightbox.esm.min.js
      2. Caption plugin[link8]
        1. photoswipe-dynamic-caption-plugin.css
        2. photoswipe-dynamic-caption-plugin.esm.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[link9]

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. paging & lightbox
  2. add anchor to back button
  3. adding multiple instances in a page, causes loading of multiple instances
  4. add it to the core

9. Links

  1. PhotoSwipe[link10] [MIT License]

9.1. Alternatives

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