Recent Changes - Search:
Cookbook /

EasyGallery-Plan

Purpose

This is a temporary page for brainstorming and problem solving about using pagelist table formats to generate image thumbnail tables from individual image pages. See EasyGallery.

Basic issues

Using pagelist template formats to create a table structure that can be populated by the results of a pagelist directive does not appear to present any big hurdles when each row of a table is limited to a single page or "record" returned by a pagelist result; the hurdles raise their ugly heads if we dare to imagine populating a given table row with more than one page or record result.

In general, when creating a table in a pagelist format, the first and last items can be easily identified by conditional directives, which makes it easy to place the opening, and closing, table directives in the format. In between those first and last items, and the opening and closing directives, the directives for a single table row can be defined, with one or more columns populated by one or more proporties of the current page or record result. For an image table, the result is not terrible, in fact, some image galleries are set up that way, with a single image on each line, with a column containing descriptive information and perhaps another column containing some comments.

If, however, we want to display more than one thumbnail on each row (i.e., a different image in each column), then we need to figure out how to populate each column. If we had multiple images on each page, then the solution would be no different from populating each column with different page properties, but that would limit the flexibility of the pagelists by essentially hardcoding in image rows.

Brainstorming

If we can get some count of the page/record results that we could evaluate in a conditional, then we could toggle the table directive to generate a new table row every x items.

What resources are available (in the core) to track the sequence or count?

  • Is there some count that we can access in a conditional?
    • Can the previous, current and next (<, + >) parameters be incremented +1 +2 or -1 -2?
    • Could we use ordered lists to generate a sequential count?
      • Many hurdles would result in separating each item by column directives without resetting the sequence.
    • How about anonymous numeric references (where [[PageName|#]] and [AnotherPage|#]] generate links as "[1] and [2]")? Is there an underlying property that can be accessed and conditioned?
  • Here is a test page with a format that incorporates all three of the above: previous, current and next, ordered lists, and anonymous numeric references
  • There is a way to to this without tables and using css, here is an example : http://css.maxdesign.com.au/floatutorial/tutorial0401.htm
    • Which looks to me like its just thumbnails wrapped in floating divs, which we could do with core using wikistyles. See below for more info.

What recipie(s) provide(s) those resources, if they are not available from the core?

A Solution using a div instead of table

If we use a single div, instead of a table, to define the outside frame to hold the gallery of thumbnail images, then we don't have to worry about rows, because the thumbnail images will simply wrap around when there is not enough space left for another image.

The div can specify its width, which can be either a fixed (number of pixels), or a percentage (of the current browser window size).

The markup for that div would be located in a pagelist template using conditionals to limit the opening and closing markup to the first and last items, like this: 

    (:if equal {<$Group}:)
    >>lframe width=100pct<<
    (:if:)
    (generate thumbnails here)
    (:if equal {>$Group}:)
    >><<

When it comes to generating the thumbnails, I ran into problems trying to combine include directives with links and wikistyles. Without going through all of the things I tried (and didn't), I ended up with an approach that made use of the description directive and the fact that its contents are translated and rendered by PmWiki. Using that, I created descriptions in each page to create a link to the current page, using the image as an alias, and wrapped the link in a thumb, as follows: 

    (:description %thumb%[[Attach:image.jpg->{$FullName}]]%% :)

While I was at it, I wrapped the image in a link back to the gallery page, like this: 

[[MainGallery|attach:image.jpg]]

With that work already done, the description directive provides a ready made thumbnail to the image page that can be used in a pagelist template without any additional link of style markup, as follows: 

    (:if equal {<$Group}:)
    >>lframe width=100pct<<
    (:if:)
    {=$Description}
    (:if equal {>$Group}:)
    >><<

While that template generates only one image per line, that can easily be taken care of by combining the conditionals and description on the same line or, for readability, simply using forward slashes, like this: 


    (:if equal {<$Group}:)
    >>lframe width=100pct<<
    (:if:)\
    {=$Description}\
    (:if equal {>$Group}:)
    >><<

For a test example of this setup, take a look at the following pages: