[%# quadplot: place two to four figures in a boardered div element
  # ARGS:
  #     files : list of image files
  # see http://rjohara.net/server/css-figures-captions/ #
-%]
[% fst = files.first %]
[% USE image "${rootdir}/images/${fst}" %]
[% ww    = image.width;
   parts = fst.split('\.');
   label = parts.first;
   dots  = template.nosubpages ? "../images" : "../../images";
%]
<div class=figure style="max-width: 100%; min-width: 7em;">
<a name=[% label %]>&nbsp;</a><br>
[%- fl = files.shift; this = "${dots}/${fl}" -%] 
<a href=[% this %]><img src="[% this %]" width=[%- IF ww < 640 -%][%- ww -%][%- ELSE -%]49%[%- END -%]></a>
&nbsp;&nbsp;
[%-  fl = files.shift; USE image "${rootdir}/images/${fl}"; this = "${dots}/${fl}"; wi = image.width -%] 
<a href=[% this %]><img src="[% this %]" alt="foo" width=[%- IF wi < 640 -%][%- wi -%][%- ELSE -%]49%[%- END -%]></a>
<br>
[%- fl = files.shift; this = "${dots}/${fl}" -%] 
[%- IF fl -%]
<a href=[% this %]><img src="[% this %]" width=[%- IF ww < 640 -%][%- ww -%][%- ELSE -%]49%[%- END -%]></a>
&nbsp;&nbsp;
[%- END -%]
[%- fl = files.shift; this = "${dots}/${fl}" -%] 
[%- IF fl -%]
<a href=[% this %]><img src="[% this %]" width=[%- IF ww < 640 -%][%- ww -%][%- ELSE -%]49%[%- END -%]></a>
[%- END -%]
</a>
<p>
[%- content -%]
</p>
</div>

