GenPics add-in to pphtml

GENPICS: A PPHTML PREPROCESSOR ADD-IN

genpics is a built-in feature of the pphtml preprocessor, that generates web page picture galleries as simple html tables. The output is one 'gallery' page, and one 'picture' page per picture. The intent is to be low-tech, and create galleries that will display on almost any type of browser.
For example, it was used to create this Utah picture gallery.

genpics does not exactly create picture galleries directly. What it does instead is drive the pphtml preprocessor, by setting several macro ('#define') variables, then apply them to a template that you provide. It does this one time for each 'picture' line in the configuration text file.

The genpics add-in does not really know anything about pictures, although it does do a resolution calculation, so that if you supply the actual resolution of the picture, it will set the variables for the correct aspect ratio when scaled in size. But all the rest is done via templates, so that it makes very few assumptions about what is being created, or how it will be used.

To create a gallery, you create a gallery page containing an empty pair of table tags where the picture thumbnails will be inserted. In place of the code for the thumbnails, you insert a call to function %GENERATE_PIC_ROWS%(). It treats your page as a template, and generates a second page with the html for the pictures inserted in the table.

For example, the following template will generate a table of picture thumbnails with a maximum of 6 pictures per row:

<table class="pic_table">
%GENERATE_PIC_ROWS%(6)
</table>

To know what code to place inside of the table, %GENERATE_PIC_ROWS%() needs to have three things defined:

%PIC_ROW_OPEN%: what code to insert at the start of each row
%PIC_ITEM%: what code to insert for each picture item in the row
%PIC_ROW_CLOSE%: what code to insert at the end of each row

These are defined using three separate #defines, which must appear before the call to %GENERATE_PIC_ROWS%(). For example:

#define_block %PIC_ROW_OPEN%
    <tr class="pic_row">
#enddef

#define_block %PIC_ITEM%
      <td class="pic_container">
        <div class="img_thumb">
          <a href="%PIC_HTML_DIR%/%PICNUM_HTML%">
            <img src="%THUMB_DIR%/%PICTHUMBNAME%" alt="%THUMBTITLE%"
               width="%THUMB_WIDTH%" height="%THUMB_HEIGHT% /></a>
          <div class="desc">%THUMBTITLE%</div>
          </div>
        </td>
#enddef

#define_block %PIC_ROW_CLOSE%
      </tr>
#enddef

You then invoke pphtml, passing a configuration file that lists the picture files, and optional picture titles.
As an example, the following configuration was used to create the Utah picture gallery:

Utah Pictures   752 500
  DSC_0047.JPG    Bryce Arch
  DSC_0050.JPG    Bryce
  DSC_0061.JPG    Arches National Park
  DSC_0067.JPG    Bryce 2
  DSC_0073.JPG    Bryce 3                 P
  DSC_0082.JPG    Zion Valley
  DSC_0086.JPG    Zion Valley 2
  DSC_0096.JPG    Zion - Dome             P
  DS2_0110.JPG    Outside Zion
  DS2_0111.JPG    Outside Zion 2
  DS3_0110.JPG    Zion                    P
  DS3_0111.JPG    Zion Lower Canyon       P
  DSC_0003.JPG    Zion Lower Canyon2      P
  DSC_0127.JPG    Utah

The %GENERATE_PIC_ROWS%() macro expands inside of the table tags, defined by the macros above. It actually does not really know it is creating an HTML table, and in fact could be used to generate many other types of display formats.

The generated code derives from the macros above, with the macro variables (enclosed in '%' characters) replaced with values generated from the configuration file.
For example, the following is a sample of code generated for the Utah picture gallery:

  <table class="pic_table">
    <tr class="pic_row">
      <td class="pic_container">
        <div class="img_thumb">
          <a href="./pic1.html">
            <img src="Thumbs/DSC_0047.JPG" alt="Bryce Arch"
               width="110" height="73" /></a>
          <div class="desc">Bryce Arch</div>
          </div>
        </td>
      <td class="pic_container">
        <div class="img_thumb">
          <a href="./pic2.html">
            <img src="Thumbs/DSC_0050.JPG" alt="Bryce"
               width="110" height="73" /></a>
          <div class="desc">Bryce</div>
          </div>
        </td>
      <td class="pic_container">
        <div class="img_thumb">
          <a href="./pic3.html">
            <img src="Thumbs/DSC_0061.JPG" alt="Arches National Park"
               width="110" height="73" /></a>
          <div class="desc">Arches National Park</div>
          </div>
        </td>
      ...

How it works:

Macro %GENERATE_PIC_ROWS%() reads the configuration file. For each line in the file, it sets its macro variables (e.g. %PICNUM_HTML%), then inserts a copy of the contents of macro %PIC_ITEM%, and then expands the macros in the inserted lines.
In addition, at the start of each row, it inserts and expands %PIC_ROW_OPEN%, and at the end of each row, it inserts and expands %PIC_ROW_CLOSE%.
The content of these macros is entirely up to the user, who is free to use the various variable values (e.g. %PICNUM_HTML%, %PICTHUMBNAME%) for any purpose.

If an optional second template file is provided, %GENERATE_PIC_ROWS%() calls that template and expands once for each picture line item. This allows the 'gallery' page to link each thumbnail to an expanded 'picture' page, one per picture.

For full details, see the documentation inside of the .zip file.

Last Updated: 4/30/10