Embrace the idea of multiple thumbnail sizes.

This is all prep work for a forthcoming change.

  * Rename the `thumb' sized to be `bigthumb', contemplating other
    thumbnail sizes.

  * Pass a `$size' argument to the `.thumbnail' module.

  * Attach the thumbnail size name as an additional class to the
    `figure' and `figcaption' classes.  (We'll add it to `thumbstrip'
    and `gallery' too, later.)

diff --git a/mason/.perl-lib/TrivGal.pm b/mason/.perl-lib/TrivGal.pm
index a77c75a..9822a0b 100644 (file)
--- a/mason/.perl-lib/TrivGal.pm
+++ b/mason/.perl-lib/TrivGal.pm
@@ -139,7 +139,7 @@ our $STATICURL //= "$ROOTURL/tgal-static";
 our $SCRIPTURL;
 
 export qw{%SIZE};
-our %SIZE = (thumb => 228, view => 1200);
+our %SIZE = (bigthumb => 228, view => 1200);
 
 export qw{init};
 my $initp = 0;

diff --git a/mason/dhandler b/mason/dhandler
index bf700a8..44a9ceb 100755 (executable)
--- a/mason/dhandler
+++ b/mason/dhandler
@@ -103,9 +103,9 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 %     my $tn;
 %     if ($iii) { $tn = join_paths $path, $d->name, $iii->name; }
 %     else { $tn = undef; }
-  <& .thumbnail, target => $d->name . "/", img => $tn,
-                caption => $m->interp->apply_escapes($d->name, "h"),
-                comment => $d->comment &>\
+  <& .thumbnail, target => $d->name . "/", comment => $d->comment,
+                img => $tn, size => "bigthumb",
+                caption => $m->interp->apply_escapes($d->name, "h") &>\
 %   }
 </div>
 % }
@@ -114,9 +114,9 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 <h2>Images</h2>
 <div class=gallery>
 %   for my $f (@$ff) {
-  <& .thumbnail, target => $f->name, img => $path . $f->name,
-                caption => $m->interp->apply_escapes($f->name, "h"),
-                comment => $f->comment &>\
+  <& .thumbnail, target => $f->name, comment => $f->comment,
+                img => $path . $f->name, size => "bigthumb",
+                caption => $m->interp->apply_escapes($f->name, "h") &>\
 %   }
 </div>
 % }
@@ -191,7 +191,8 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 %
 <div class=thumbstrip>
 % for my $f (@$ff) {
-  <& .thumbnail, target => $f->name, img => $dir . "/" . $f->name,
+%   my $img = $dir . "/" . $f->name;
+  <& .thumbnail, target => $f->name, img => $img, size => "bigthumb",
                 caption => $m->interp->apply_escapes($f->name, "h"),
                 focus => $f->name eq "$base$ext" &>\
 % }
@@ -235,16 +236,16 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 %###-------------------------------------------------------------------------
 <%def .thumbnail>\
 % my $tn;
-% if (defined $img) { $tn = scaled "thumb", $img; }
+% if (defined $img) { $tn = scaled $size, $img; }
 % else { $tn = "$STATICURL/folder.svg"; }
 % if ($focus) {
-  <figure class=thumb id=focusthumb>
-    <img class=thumb load=lazy src="<% $tn |u %>">
+  <figure class="thumb <% $size %>" id=focusthumb>
+    <img class="thumb <% $size %>" load=lazy src="<% $tn |u %>">
     <figcaption><span class=name><% $caption %></span></figcaption>
 % } else {
-  <figure class=thumb>
+  <figure class="thumb <% $size %>">
     <a class=thumb href="<% $target |u %>">
-      <img class=thumb load=lazy src="<% $tn |u %>">
+      <img class="thumb <% $size %>" load=lazy src="<% $tn |u %>">
       <figcaption>
        <span class=name><% $caption %></span>
 % if (defined $comment) {
@@ -258,6 +259,7 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 <%args>
        $target
        $img
+       $size
        $caption
        $comment => undef
        $focus => 0

diff --git a/static/tgal.css b/static/tgal.css
index ca027f4..a708599 100644 (file)
--- a/static/tgal.css
+++ b/static/tgal.css
@@ -83,16 +83,13 @@ div.gallery {
 figure.thumb {
        display: inline-block;
        vertical-align: top;
-       width: 228px;
        margin: 1em;
 }
-
 a.thumb:link { display: inline-block; }
+img.thumb { object-fit: contain; }
 
-img.thumb {
-       width: 228px; height: 228px;
-       object-fit: contain;
-}
+figure.bigthumb { width: 228px; }
+img.bigthumb { width: 228px; height: 228px; }
 
 div.comment {
        border: thin black solid;
@@ -103,10 +100,7 @@ div.comment {
        margin-top: 2ex; margin-bottom: 2ex;
 }
 
-figure.thumb figcaption {
-       display: block;
-       width: 228px;
-}
+figure.thumb figcaption { display: block; }
 figcaption { text-align: center; }
 figcaption span.name { font-family: sans-serif; }
 figcaption span.comment { font-style: italic; margin-inline-start: 1em; }