Action: Gallery

Compatible with: R6.1
Current version: 0.9
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/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 (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.2.7.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.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. 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 [MIT License]

9.1. Alternatives

Others

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

Files

gallery_action_lightbox.jpg gallery action with lightbox and caption 116 KiB  14.04.2022 05:11 
gallery_action_thumbs.png gallery action with thumbnails 36 KiB  10.03.2017 15:13 
photoswipe_5.2.7.zip PhotoSwipe v5 — JavaScript image gallery and lightbox 25 KiB  14.05.2022 22:00 

Read comment (1 comment)