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]

Show Files (3 files)

Comments

  1. thumbnail library will do all of this math, but in case you're stuck ...

     
    // Original values obtained from the top image
    // can come from getimagesize(), imagesx()/imagesy(), or similar
    
    $source_width		= 66;
    $source_height		= 100;
    $thumbnail_width	= 50;
    $thumbnail_height	= 100;
    
    // Compute aspect ratios
    $source_ar			= $source_width / $source_height;
    $thumbnail_ar		= $thumbnail_width / $thumbnail_height;
    
    // Compute the output width and height based on the
    // comparison of aspect ratios
    if ($source_ar > $thumbnail_ar)
    {
    	// Use the thumbnail width
    	$output_width	= $thumbnail_width;
    	$output_height	= round($original_height
    						/ $original_width * $thumbnail_width);
    }
    else
    {
    	// Use the thumbnail height
    	$output_height	= $thumbnail_height;
    	$output_width	= round($original_width
    						/ $original_height * $thumbnail_height);
    }