mason/dhandler, static/tgal.css: Embrace idea of multiple thumbnail sets.

Rather than a single row of thumbnails, the code is now structured so
that it might have several at the same time, with different sizes.  CSS
media queries can control which one actually gets displayed.

Internally, we make two passes over a directory, fetching the images the
first time through, and making scaled thumbnails afterwards, and
introduce loops over the available sizes (though currently there's only
the one).

We're actually just making the same display as before, so there's still
no functional change.

diff --git a/mason/dhandler b/mason/dhandler
index 7d76fdf..011c561 100755 (executable)
--- a/mason/dhandler
+++ b/mason/dhandler
@@ -82,6 +82,16 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
            urlencode "$SCRIPTURL/$uplink";
        }
        (my $nosl = $path) =~ s!/$!!;
+
+       my %tn;
+       for my $f (@$ff)
+         { $tn{$f} = TrivGal::Image->new($path . $f->name); }
+       for my $d (@$dd) {
+         my ($ddd, $fff, $iii) = listdir $real . "/" . $d->name;
+         $tn{$d} = $iii ?
+           TrivGal::Image->new(join_paths $path, $d->name, $iii->name) :
+           undef;
+       }
 </%perl>
 %
 <&| .html, title => "Folder " . $m->interp->apply_escapes($nosl || "[top]", "h"),
@@ -97,29 +107,28 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 %
 % if (@$dd) {
 <h2>Subfolders</h2>
-<div class=gallery>
-%   for my $d (@$dd) {
-%     my ($ddd, $fff, $iii) = listdir $real . "/" . $d->name;
-%     my $tn = $iii ?
-%      TrivGal::Image->new(join_paths $path, $d->name, $iii->name) :
-%       undef;
+%   for my $size (qw{bigthumb}) {
+<div class="gallery <% $size %>">
+%     for my $d (@$dd) {
   <& .thumbnail, target => $d->name . "/", comment => $d->comment,
-                img => $tn, size => "bigthumb",
+                img => $tn{$d}, size => $size,
                 caption => $m->interp->apply_escapes($d->name, "h") &>\
-%   }
+%     }
 </div>
+%   }
 % }
 %
 % if (@$ff) {
 <h2>Images</h2>
-<div class=gallery>
-%   for my $f (@$ff) {
+%   for my $size (qw{bigthumb}) {
+<div class="gallery <% $size %>">
+%     for my $f (@$ff) {
   <& .thumbnail, target => $f->name, comment => $f->comment,
-                img => TrivGal::Image->new($path . $f->name),
-                size => "bigthumb",
+                img => $tn{$f}, size => "bigthumb",
                 caption => $m->interp->apply_escapes($f->name, "h") &>\
-%   }
+%     }
 </div>
+%   }
 % }
 %
 <div class=fill></div>
@@ -190,14 +199,16 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 % }
 </div>
 %
-<div class=thumbstrip>
-% for my $f (@$ff) {
-%   my $img = TrivGal::Image->new($dir . "/" . $f->name);
-  <& .thumbnail, target => $f->name, img => $img, size => "bigthumb",
+% my %img = map { $_ => TrivGal::Image->new($dir . "/" . $_->name) } @$ff;
+% for my $size (qw{bigthumb}) {
+<div class="thumbstrip <% $size %>">
+%   for my $f (@$ff) {
+  <& .thumbnail, target => $f->name, img => $img{$f}, size => $size,
                 caption => $m->interp->apply_escapes($f->name, "h"),
                 focus => $f->name eq "$base$ext" &>\
-% }
+%   }
 </div>
+% }
 <& .footer, path => $dir &>
 </&>
 %

diff --git a/static/tgal.css b/static/tgal.css
index a708599..0cbae14 100644 (file)
--- a/static/tgal.css
+++ b/static/tgal.css
@@ -76,9 +76,10 @@ div.footitem {
 }
 
 div.gallery {
-       display: flex; flex-direction: row; flex-wrap: wrap;
+       flex-direction: row; flex-wrap: wrap;
        align-items: start; justify-content: space-evenly;
 }
+div.gallery.bigthumb { display: flex; }
 
 figure.thumb {
        display: inline-block;
@@ -142,7 +143,8 @@ div.thumbstrip {
        max-width: 100%;
        overflow-x: auto;
        text-align: center;
-       display: flex; flex-direction: row; align-self: center;
+       flex-direction: row; align-self: center;
 }
+div.thumbstrip.bigthumb { display: flex; }
 
 /*----- That's all, folks -------------------------------------------------*/