Gallery Plugin

Use the following link in the plugin manager or to download the plugin manually.

• http://dev.splitbrain.org/download/snapshots/gallery-plugin-latest.tgz

Recent Changes:

• 2008-04-01 – support for lightboxForEveryImg option, captions in lightbox mode (code by jpbarto)
• 2006-11-12 – patch by Dmitry Baikov: defaults for all options can be set in config manager
• 2006-09-24 – fixed broken image in Safari and Konqueror (removes undefined request as well)
• 2006-07-24 – fix bug when browsing backwards in lightbox, some CSS adjustments
• 2006-06-12 – fixed a bug with the max size option for lightbox and one with a missing closing <tr>
• 2006-05-26 – fixed double encoding, added max size support for lightbox, quicklink in new media manager
• 2006-04-30 – fixed lightbox with IE, removed IE proprietary CSS, use resizing only when needed
• 2006-04-30 – added lightbox and reverse support
• 2005-10-16 – added additions by Joe Lapp and Dave Doyle
• 2005-08-14 – added support for the new media file URL rewriting
• 2005-07-31 – initial release

A basic gallery can be added by selecting a namespace like this:

{{gallery>namespace}}

All imagefiles in the selected namespace will be added to the image gallery. Note: those images need to be a valid pagename, eg. all lowercase.

You can define the wanted thumbnail size by adding its dimension as parameter:

{{gallery>namespace?150x150}}

The default is a dimension of 120×120 pixels.

You can define the number of columns as well:

{{gallery>namespace?6}}

The default number of columns is 5 and can be configured in the config manager. If you specify a 0 no table is used instead all thumbnails are added in a sequence.

To have the filename displayed below the thumbnails add the showname parameter (if this is made the default in the config, you may disable it with noshowname):

{{gallery>namespace?showname}}

If you want the files sorted in the reverse order use the reverse keyword (if this is made the default in the config, you may disable it with noreverse):

{{gallery>namespace?reverse}}

If you don't want to link to the image detail pages but directly to the image itself use the direct parameter (if this is made the default in the config, you may disable it with nodirect):

{{gallery>namespace?direct}}

For fancy JavaScript based inline browsing of the images use the lightbox keyword ¹⁾. This feature implicitly sets the direct parameter. If this is made the default in the config, you may disable it with nolightbox.

{{gallery>namespace?lightbox}}

All params can be combined:

{{gallery>namespace?150x150&6&showname}}

You can also specify the size of lightbox images. It is done the same way as with thumbnails, except using a capital 'X'. The default is 800×600.

{{gallery>namespace?lightbox&500X400}}

IMPORTANT: When you have added your pictures they may not show up in the gallery: add '&purge=true' to the end of the URL to clear the cache - and then you should see them.

This mode will open the clicked picture inside the current browser window without leaving the current page. You can close the picture view by clicking the little X in the upper right corner or anywhere in the picture. You can move to the next or previous image by using the arrow buttons in the lower corners.

The picture is downsized if necessary to fit into the current browser window. You can enlarge it with the arrow button in the top corner.

The following keys can be used to navigate:

The Lightbox feature will also be used for all images embedded using the standard DokuWiki image syntax and having set the direct parameter. This behavior can easily be disabled by changing the lightboxForEveryImg variable to 0 at the very top of the script.js file.

Note: The feature does not use Version 2 of the Lightbox script because of its heavy and DokuWiki-incompatible dependencies.

First of all: It´s a great plugin!
But the problem I have is: If the EXIF or IPTC infos of the Photos are not in UTF8, then the special charcters (like the german äöüß, the french é,í,ç) are not shown. Unfortunately the software like Photoshop or Paint Shop Pro is saving the EXIF/IPTC infos not in UTF8 but in ISO-8859-1. Maybe the solution has to be made not in the gallery plugin but in an other dokuwiki-modul?
Have anybody an idea for a solution? Thanks - Bernhard Henselmann / 27.1.2008

Yes, I agree. This should be considered a bug since it renderes undefined fields (e.g. EXIF.UserComment) as “ASCII”. Undefined user comments are common in Mac systems.

Suggestions: For larger galleries, modify the syntax to include rows option in order to control how many rows to output. Display “See more…” or “Next” link after X Rows which moves to a second page displaying the next X rows. elliotj 2006-04-24

Suggestions:being able to resize automatically the image before uploading it to the namespace directory would be nice - any comments to shaudebourg@yahoo.fr 2006-01-13

Suggestions: adding an option to put pics in a table (like a docuwiki one) & adding a “comment zone” to each picture — ZeBob 2005-10-15 19:46

Suggestions: An option to have the TITLE and the subtext from the METADATA displayed under each thumbnail (should make sense to others as well, right?) breg@kanka.de 2006-05-29 13:38

Suggestion: Other sort options. Perhaps by date, or other METADATA from the images. — Rob 2006-06-28

Suggestion: Possibility to show pictures from more than one namespace in a single gallery. — Andreas 2006-06-30 14:17

Suggestion: Option to upload many pictures at a time. Thanks — Oliver Schulze L. 2006-08-15 17:25

I really want this. To me, its a killerfunction. I tried to manually upload jpg files into the data/media/ns/, but it didnt work. It'd be great! ~~

I do that and it works fine. Some stuff you must consider is: picture filenames must be all lowercase (even the .jpg) and if you want full control over files (like changing metadata, etc) you must set permissions so that the webserver's user can write on the files. Still, uploading a tgz or a zip would be way easier :) – Miguel 2007-01-09

Request: Ability to remove the only-lowercase “feature” or provide a configuration option to allow mix-case/special characters. Many of us have pre-existing libraries of images and changing the names is either problematic, or inappropriate for organizational reasons. — Barney 2006-09-26

Strongly agree!

Request: A form element for image upload to the album. This is analogous to the “new blog entry” form element in the blog plugin. The images could be automatically scaled to a maximum size set in settings, to save disc space. Possibility for multiple images upload in a zip file. — Viktor Söderqvist 2006-12-19 05:22

Request:I have issue on meta information of uploaded files files I am not able to see metinf option for all the uploads .May i know why is it happening

Request: Some sort of auto cache refreshing or nocache feature. I'm having to erase the cache every time I upload new pictures to a particular gallery? — Josh

Request: Relative namespace such as ”.”. ({{gallery>.}} would be useful together with the blog plugin when date prefix set (yyyy:mm:dd: etc) on the blog page names. I.e. one gallery per day (i.e. per blog entry).) — Viktor 2007-09-21 03:38

Request: only show .jpg files and not show .gif, .png, etc.

Suggestion: Add an option to randomly display only a single image of the gallery. — Guy Brand 2005-12-28 21:44

I made one simple random image option. In function handle add the following lines just before return $data. Should be something like line 99.

        //show random image
        $data['random'] = false;
        $data['randomNoCache'] = false;
        if(preg_match('/\bshowrandom\b/i',$params,$match)) {
            $data['random'] = true;
        }
        if(preg_match('/\bshowrandomnc\b/i',$params,$match)) {
            $data['random'] = true;
            $data['randomNoCache'] = true;
        }

and in function _gallery add following lines just after build gallery comment. Near line 140.

        if($data['random']) {
            $cnt = count($files);
            $show = rand(0,$cnt-1);
            $lastok = -1;
            $i = -1;
// Scan through to be check that image is displayable. If not, then pickup last known image.
// TODO If no displayable images before this random image, then should scan the rest to see if anything to show
            foreach($files as $img){
                $i++;
                if(!$img['isimg']) continue;
                $lastok=$i;
                if ($i == $show) {
                  $lastok=$i;
                  break;
                }
            }
            if ($lastok>-1) {
                $ret .= '<div class="gallery">';
                $ret .= '<div>';
                $ret .= $this->_image($files[$lastok],$data);
                $ret .= $this->_showname($files[$lastok],$data);
                $ret .= '</div> ';
                $ret .= '</div> ';
 
            } else {
                $ret .= '<div class="nothing">'.$lang['nothingfound'].'</div>';
            }
            return $ret;
        }

The option to use is showrandom — Otto Vainio 2005-12-29 10:59

It works, almost. One of the image in the gallery is shown, but it's always the same (the last one in the gallery) and passing sizing info doesn't seem to work. — Guy Brand 2006-01-01 21:21

Ok it was using cache. I added an option to use this without cache. Use showrandomnc.
Image size should work. The format is

gallery>:namsepace?showrandom&200x200

In fact you can use almost any non text character to separate the options. Showname works also. Ofcourse the option to define the number of columns is obsolete. You can see the plugin in action here. — Otto Vainio 2006-01-02 19:35

Otto, thanks for writing the 'Random' extension to this great little plugin. I noticed that the gallery plugin used without showrandom or showrandomc displays a nice border around each image. However, when used with showrandom or showrandomc, there is not a border. What can we do to get the border so it also displays on random images? I find it much more pleasing to the eye with that border. Thanks for any help you can lend. Jeff Childs 2006-02-23 08:27]]

The modified code was missing div class=gallery part. It is now there. There was also a bug in my code. The i=0 should ofcourse be i=-1 — Otto Vainio 2006-02-27 07:46

Suggestion: Adding a prefix option to only show pictures with a certain prefix. — Andreas Trawoeger 2005-11-11 14:13

I have made a simple 'only' option: It only displays pictures whose filenames contain the argument. I altered function handle and function _gallery. Use this form to email me. Will

This is how you use it:

{{gallery>namespace?onlysearchstring}}

This will make a gallery only of images whose filenames contain 'searchstring'. The 'only' is a very simple method of telling the 'only' argument from the other ones. I have found this a versatile tool.

There are only a couple of lines to go in:

The clump of code starting “limit what..” goes in near the bottom of handle (about line 99 of syntax.php in the gallery plugin), below the last clump but above the 'return' bit. I've shown the previous code so you can get your bearings.

 
        //show the filename
        if(preg_match('/\bshowname\b/i',$params,$match)) {
            $data['showname'] = true;
        }else{
            $data['showname'] = false;
        }
 
        //limit what is shown to filenames containing the string after 'only'
        if(preg_match('/\bonly/i',$params,$match)) {
            $data['only'] = true;
            $data['filestring'] = substr(strstr($params, 'only'), 4);
        }else{
            $data['only'] = false;
        }
 
        return $data;
    }

The line “if($data['only']…” goes in function _gallery in line 147 of syntax.php of the gallery plugin. I've included the previous bit so you can get your bearings again.

 
        // build gallery
        if($data['cols'] > 0){ // format as table
            $ret .= '<table class="gallery">';
            $i = 0;
            foreach($files as $img){
                if(!$img['isimg']) continue;
           	if($data['only'] && !stristr( htmlspecialchars($img['file']), $data['filestring'])) continue;

How to use the “only” option with lightbox? By default lightbox shows the other images in the same namespace which are exluded by the “only” option. – Shiva Shankar 2006-09-14 15:03

Hello, I found an optimized solution for the 'only' option within this plugin. — Anja Vag 2006-11-02 13:08
In the previous code is a little bug where you have to set the flag 'onlysearchstring' at the end of each gallery tag like this one.

{{gallery>gallery:anja?2&200x200&direct&onlyabstract}}

You could change only one line to use the 'only' flag on each position. The changed command searchs the 'only' string as beginning and the next '&' as finish to set the string part between both into the variable $data['filestring'] as your searchstring. In my examples 'absract' is the searchstring.

        //limit what is shown to filenames containing the string after 'only'
        if(preg_match('/\bonly/i',$params,$match)) {
            $data['only'] = true;
            $data['filestring'] = substr(strstr($params, 'only'), 4, strpos(substr(strstr($params, 'only'), 4), '&'));
            if (!$data['filestring']) $data['filestring'] = substr(strstr($params, 'only'), 4);	// --> added by a.vag 2007-01-10
        }else{
            $data['only'] = false;
        }
 
        return $data;
    }

Now you could use the 'only' option in this form.

{{gallery>gallery:anja?2&onlyabstract&200x200&direct}}

— Anja Vag 2007-01-08 13:09 – added a bug fix of the 'only' option

This is a new option for the gallery plugin to display one column of images and the description of each image next to the image.

To use this otipn add the following code within the file syntax.php at the end of the function handle() but above the 'return' bit.

        //display one col and the description right -- asoahc
        if(preg_match('/\bwithdesc\b/i',$params,$match)) {
            $data['cols'] = 1;
            $data['withdesc'] = true;
        }else{
            $data['withdesc'] = false;
        }

The next part for this option is to add the function call whitin the _gallery() function. It's only the last line within this code clump.

        // build gallery
        if($data['cols'] > 0){ // format as table
            $ret .= '<table class="gallery">';
            $i = 0;
            foreach($files as $img){
                if(!$img['isimg']) continue;
                if($data['only'] && !stristr(htmlspecialchars($img['file']), $data['filestring'])) continue;
 
                if($i == 0){
                    $ret .= '<tr>';
                }
 
                $ret .= '<td>';
                $ret .= $this->_image($img,$data);
                $ret .= $this->_showname($img,$data);
                $ret .= '</td>';
                $ret .= $this->_withdesc($img,$data);

At the end of the file syntax.php you have to enter following code for the new function _withdesc() above of the last '}'. The function _withdesc reads the image title and the description from the METADATA and sets both next to the image.

    /**
     * Defines how the description should look
     */
    function _withdesc($img,$data){
        global $ID;
 
        if(!$data['withdesc']) { return ''; }
 
        //prepare link
        $lnk = ml($img['id'],array('id'=>$ID),false);
 
 
        $desc = $img['meta']->getField('Iptc.Caption');
        $desc2 = preg_replace('/;/', '<br />', $desc);
 
        $ret  = '';
        $ret .= '<td class="desc">';
        $ret .= '<b>' . $img['meta']->getField('Iptc.Headline') . '</b><br />';
        $ret .= $desc2;
        $ret .= '</td>';
 
        return $ret;
    }

Example: If you want to type some informations about an image into the caption area of the METADATA like artist, year, description, technology and so one. You could write in following way and at the page it will be display in separate lines. The semicolon will be replaced with a linebreak.

Mediafile Selection:

artist: Hans Sebastian Meyer;year: 2006;description: picture of a hourse

Display at the page:

artist: Hans Sebastian Meyer
year: 2006
description: picture of a hourse

Attention: If you use the cacherevisionseraser you should disable the deletion of the meta files. You could configure this behavoir with the configuration file configs.php within the plugin folder. The following flag should be set to 0.

$this->configs['cache_del_metafiles'] = 0;  
// Delete meta files (./data/meta/*)?  -1 = Ask / 0 = Force no / 1 = Force yes (Default: -1)

I hope it works for which want to use it. If everybody have a question about this topic I'll try to help. — Anja Vag 2006-11-02 14:28
— Anja Vag 2006-11-03 18:22 – pictures added

Hello! I have patched my syntax.php accordingly and tried to create a gallery using

{{gallery>namespace?withdesc}}

The pictures are aligned one below the other, but there is no meta-information available. From the picture you posted, I assume that it is somehow possible to enter this information in the media manager – however, I can't find any such option. So, where should I enter the information? – Niklas Volbers

This information is actually in the media manager. If you look at the images there, you'll find a small pen-like image. Click on that one. Of course, you have to have the proper permissions.

This is a new extended option for gallery plugin. It only shows the title of an image if one defined within the Meta data. To use this feature you have to add some little code clumps into syntax.php file.

The command is only showtitle and it's compatible the all other options except showname.

{{gallery>namespace?showtitle&200x200&lightbox}}

At firt insert following clump into the handle() function. You only have to insert the lines between the ”…”.

function handle($match, $state, $pos, &$handler){
    $match = substr($match,10,-2); //strip markup from start and end
	...
	//show the image title - if defined by meta data 		-->> added by a.vag 2007-03-21
	$data['showtitle'] = $this->parseOpt($params, 'showtitle');
	...
	return $data;
    }

The next step is to insert the function call within the _gallery() function.

    ...
    $ret .= '<td>';
    $ret .= $this->_image($img,$data);
    $ret .= $this->_showname($img,$data);
    $ret .= $this->_showtitle($img,$data);		// added by a.vag 2007-03-21
    $ret .= '</td>';
    $ret .= $this->_withdesc($img,$data);
    ...

HINT: If you are using the showrandom extension for the plugin you have to insert the function call into this code clump, too.

The last step is to add the function _showtitle() at the end of the file but before the last '}'.

 /**
     * Defines how the title  should look			--> added by a.vag 
     */
    function _showtitle($img,$data){
        global $ID;
 
        if(!$data['showtitle']) { return ''; }
 
        //prepare link
        $lnk = ml($img['id'],array('id'=>$ID),false);
 
        // prepare output
        $ret  = '';
        $ret .= '<br /><a href="'.$lnk.'">';
        $ret .= $img['meta']->getField('Iptc.Headline'); // see fix posted on the wiki
        $ret .= '</a>';
        return $ret;		
    }

That's all. Have fun with it …. — Anja Vag 2007-03-23 09:18

You may want to display your images by title order rather than by image name order. This little piece of code performs this. Insert this code into the function call within the _gallery() function.

        //anything found?
        if(!count($files)){
            $ret .= '<div class="nothing">'.$lang['nothingfound'].'</div>';
            return $ret;
        }
 
#--- New code
        // Order the images by title.
        // Untitle images will appear first
        if($data['showtitle']) {
            $oldfiles = $files;
            $files = array();
            $unnamed = 0;
            foreach ($oldfiles AS $img) {
                $title = $img['meta']->getField('Iptc.Headline');
                // If there is no title assign it a number
                if(null == $title) { $title = $unnamed++; }
                // Check that that title doesn't already exist
                // if it does then add a random number to the end
                if(isset($files[$title])) { $title .= '-'.rand(0-666); }
                $files[$title] = $img;
            }
            // When comparing keys treat as a strings
            ksort($files, SORT_STRING);
        }
 
#--- End of New code
 
        //reverse if wanted
        if($data['reverse']) rsort($files);

— David Baggaley 2007-09-17 11:41

Does anyone have a recent version of the gallery plugin installed at their site? I'd like to be able to see the lightbox feature working.

Though the site is still in an experimental state, the gallery-plugin is up and running fine :) http://wiki.pooka.de/doku.php/showroom (didn't work for at least 3 weeks - 10.10.2007)

http://www.elliotj.com/wiki/doku.php/photos - Works good.

http://www.mierzejewski.net/photography

http://wiki.gammaproduction.de/english/dokuwiki/plugins/gallery - including another feature, the magazine layout

http://www.sorryeverybody.ch/galerie (didn't work for at least 3 weeks - 10.10.2007)

http://www.cutestudio.net/doku.php?id=planes:catalina

http://www.micky-wenngatz.de - I am just experimenting with several additions.

http://remy.c.la/ - Superbe galerie qui s'installe facilement. Very easy To INSTALL this gallery in DOKUWIKI -

http://www.radick.de

Is there some kind of step by step tutorial somewhere re: how to install/get this to work?

How do I actually use the plugin? Where do I put the images and … I'm really lost. Help please.

• You have a directory data/pages where your pages (the content of your wiki) are located. Similar, you have data/media with all the images. When you enter {{gallery>nsp1}} in one of your pages, this plugin will show all images (with names in lower case) in directory data/media/nsp1.

When you write “add ‘&purge=true’ to the end of the URL to clear the cache,” you should clarify that you mean the URL of the page that the Gallery commands are embedded on. This was not clear to me and I thought you meant to add ”&purge=true” to the end of the Gallery line itself.

How to integrate lightbox.js in Dokuwiki? After klicking on a picture of my gallery i get it in same tab instead of lightbox. Where should I paste the script destination? In which header? thx edit: today it works, without any changes! CTRL+F5 is a solution.

Similar problem: After clicking on a thumbnail in the gallery, I just get the image, which opens in the same window. Running the most recent RC of DokuWiki. –> Never mind, it just took a while to propagate. Works fine now. CTRL+F5 is a solution.

Same proble: some tines the image opens in the same window (not using Lightbox). This is because of a syntax error in the javascript If I clean the browser cache and reload the page, works fine again. I use Firefox 1.5.0.8 and 2.0

2007-02-07 - I am getting the following error after installing and trying to use gallery-plugin-2006-11-12.tgz:

Fatal error: Call to undefined method syntax_plugin_gallery::getConf() in C:\wamp\www\dokuwiki\lib\plugins\gallery\syntax.php on line 94

All other plugins I am using work great, except this one. Any ideas?

It seems that you have a dokuwiki version too old for this plugin. Try to upgrade it. — Samuele Tognini 2007-02-07 18:02

• Great plugin, but I still can't get LightBox to work. No amount of CTRL+F5 helps. I use Firefox 2.0.0.4, have cleared cache many times, added &purge=true to the wiki page URL that has the gallery, restarted the computer. Do I have to install LightBox myself? I wonder, since I do not see the lightbox.js inside lib/plugins/gallery. BTW, I did see LightBox working on the example web sites listed above on this page. I am lost here. Thank you. The command I use is:

{{gallery>namespace?showname&lightbox}}

• Ok, LigtBox started working a day or so later. Maybe the problem was that I also had lightboxv2 plugin (which I never managed to get to work properly, i.e. use LightBox, and which also caused edit buttons, i.e. no B, I etc buttons in edit mode). BTW, does anyone have lightboxv2 working with dokuwiki dokuwiki-rc2007-05-24?

Mozilla browsers including Firefox use SHIFT+F5 or SHIFT+CTRL+R for forced reloading instead if IE's CTRL+F5

• 2007-10-08 - Any chance of having this plugin create real thumbnails rather that just telling the browser to resize the image? I have large photos that take forever to download over a slow link. I was hoping this plugin would create smaller thumbnails for the index page. Alas, no. :(

Your dokuwiki should do it. If not then your installation is missing PHP's libGD or your images are too big for php to handle or your config is wrong :)
If your images are big, then start first by uploading smaller images. Then check your config media_settings. If these are ok, then your php is missing libGD. — Otto Vainio 2007-10-18 12:57

When you use lightbox, animated gif image makes a lot of javascript error. The solution is below.
In “script.js” _show : function(num), find imag.onload = function() {…};
Add line before};

imag.onload = function() {};