Summary: Creates an easy image gallery
Prerequisites: 2.0 beta36
Maintainer: Klonk Martin Fick
Discussion: EasyGallery-Talk
Categories: Images


Is there a possibility to create a very basic (or very flexible, depends on point of view) gallery with PmWiki?


Yes it's really easy, just use some builtin functions such as tables, groups, trails, and pagelists. Everything depends on the use of links.

Use a Table to Display Thumbnails Linked to Full Size Images

First of all create an overview page (standard wiki page). This overview page could contain a list of categories with links to other overview pages or some thumbnails.

Often a gallery consists of some or more pages that contain thumbnails. When clicking on the thumbnails a new window opens showing the photo in bigger size.

To achieve this a WikiPage could look like this:

 ||align=center width=100%
 || %newwin%[[Attach:pic1.jpg|Attach:pic1_t.jpg]]%% || %newwin%[[Attach:pic2.jpg|Attach:pic2_t.jpg]]%% ||
 || %newwin%[[Attach:pic3.jpg|Attach:pic3_t.jpg]]%% || %newwin%[[Attach:pic4.jpg|Attach:pic4_t.jpg]]%% ||

As you can see just create a table that holds all the links to the big pictures (pic1.jpg, pic2.jpg, pic3.jpg, pic4.jpg) while showing the thumbnails (pic1_t.jpg, pic2_t.jpg, pic3_t.jpg, pic4_t.jpg). Of course you can name the files as you like, but I suggest adding something to mark the files as thumbnails and for knowing which files belong together. %newwin% just gets the link opened in a new browser window.

Personally I use IrfanView for conversion and creation of the thumbnails and resized photos (due to the easy batchprocessing). My webspace is not that big so I didn't want to upload the original files. Of course sizes and qualities of the used pictures depend on your needs or wishes. But as a hint for a 6Mpixel photo of my CANON EOS 300D I use to 8% resized image for a thumbnail and 25% for the image.

Of course, when you have a large picture database this is alot of work and you should consider a "real" gallery script, but If you just want to show a few pictures, this is the easiest way for you.

Organize Individual Photo Pages in a Group

One way to get organized is to create a group for all your pictures, something simple like Photo. Use this group to create individual pages for each photo. A photo page will contain information for that particular photo: captions, descriptions, categories,... Of course, add the photo itself to this page or, even better, add a scaled down version of the photo linked to the full resolution photo. Upload all your photos (full resolution and scaled down versions) into that group and embed each photo into its page.

  • In the Photo group, upload the full size photos:
    pic1.jpg, pic2.jpg, pic3.jpg
  • In the Photo group, upload the scaled down photos:
    s_pic1.jpg, s_pic2.jpg, s_pic3.jpg
  • In the Photo group, create a wiki page for each photo:
    Photo.Pic1, Photo.Pic2, Photo.Pic3

These pages may look something like this:


(:title Mom:)
[[ Attach:s_pic1.jpg -> Attach:pic1.jpg ]]
Categories: [[!Family]], [[!Ireland]]


(:title Dad:)
[[ Attach:s_pic2.jpg -> Attach:pic2.jpg ]]
Categories: [[!Family]], [[!Germany]]


(:title Shelly:)
[[ Attach:s_pic3.jpg -> Attach:pic3.jpg ]]
Categories: [[!Family]], [[!UVA]]

This sets up a conveniently sized photo for web viewing while giving access to the real thing for printing. This also allows your viewers to add comments to your photos for others to read.

Use WikiTrails to Page Through Albums

Once you have individual pages for each photo it is easy to string related photo pages together as a Wiki Trail. If you want your photos to be a part of multiples Albums, you can install Dynamic Wiki Trails.

Use PageLists and Searchresults to Automatically Generate Thumbnail Tables

PagelistTemplates can be combined with individual photo pages, described above, to automatically generate tables of thumbnail, similar to the thumbnail tables described above. For this approach, anchors should be incorporated into the individual photo pages to isolate the thumbnail links, for example


(:title Mom:)
[[ Attach:s_pic1.jpg -> Attach:pic1.jpg ]]
Categories: [[!Family]], [[!Ireland]]

The table markup for specifying the format of the table should be incorporated into a pagelist template that makes use of the start and end anchors added to individual photo pages, for example:

Under construction: Help plan.

Once the individual photo pages (with anchors) and pagelist template format are in place, galleries of thumbnails can be dynamically generated by using pagelist (or searchresult) directives in a page, or pages, where the thumbnail tables are to be displayed. The pagelist, or searchresult, directive should refer to the newly created format (specifying the location of the template if it is not located in one of the default locations) and should limit the results to the photo pages, for example, use "group=Photo" to limit results to the photo group and "name=Pic*" to limit results to pages whose names begin with "Pic" To further limit the pages returned by the pagelist (or searchresult) directives, use the link parameter to limit the results to certain categories, and/or specify search terms to return pages containing certain words. If you want to ensure that certain words are available for pagelists and searchresults, but don't want to use additional categories or have those words appear on the page, include them in a keyword directive on each page, much as you would with "tags" (e.g. (:keyword animal dog hound favorite:) or (:keyword painting landscape sky sunset trees:)

If you want to do even more with this, you might consider adding description directives to your individual pages and then incorporating references to the description variable in your pagelist templates.

See Also

  • ThumbnailLinkToImage - This recipe doesn't use only built-ins, but it allows you to upload an image and do (:thumb Attach:Attach:pic1.jpg:) to create a thumbnail link to the image that links back to the current page.


Martin Fick
Ian MacGregor


See discussion at EasyGallery-Talk