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 7d76fdf80a85267a3fb73331c481cb58c530b1d4..011c561477f456bef9d0e861d37014260b7f10f9 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 a708599d1995153860e75d47fc27c3c41b773198..0cbae14a56664aff408e8f460b7401e34152944a 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 -------------------------------------------------*/