mason/dhandler (.image), static/tgal.css: Adaptive view scaling.

The view now picks an appropriately scaled image from the backend.  The
selection is rather imperfect, because it's based on the window size,
with guesses at the size of the furniture, but it seems to work OK.

diff --git a/mason/dhandler b/mason/dhandler
index 4676769..0c834b9 100755 (executable)
--- a/mason/dhandler
+++ b/mason/dhandler
@@ -222,16 +222,26 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
        my $urldir = join_paths $SCRIPTURL, $dir;
        my ($dd, $ff, $ii) = listdir $realdir;
        my @thumbsz = qw{smallthumb medthumb bigthumb};
+       my @imgsz = sort { $SIZE{$a} <=> $SIZE{$b} } keys %SIZE;
+       my ($wd, $ht, $max);
        my %tn;
-       my $vw;
+       my %vw;
 
        my $fi = undef;
        FILE: for (my $i = 0; $i < @$ff; $i++) {
          my $f = $ff->[$i];
          my $img = TrivGal::Image->new(join_paths $dir, $f->name);
          for my $sz (@thumbsz) { $tn{$f->name}{$sz} = $img->scale($sz); }
-         if ($ff->[$i]->name eq "$base$ext")
-           { $fi = $i; $vw = $img->scale("medium"); }
+         if ($ff->[$i]->name eq "$base$ext") {
+           $fi = $i;
+           ($wd, $ht) = ($img->wd, $img->ht);
+           $max = $img->sz;
+           SIZE: for my $sc (@imgsz) {
+             my $sz = $SIZE{$sc};
+             last SIZE if $max < $sz;
+             $vw{$sc} = $img->scale($sc);
+           }
+         }
        }
        defined $fi or die "image not found in its folder?";
        my $this = $ff->[$fi];
@@ -270,7 +280,19 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
   <div class=prev><a class=prev href="<% "$pre/$link{prev}" |hu %>">&lsaquo;</a></div>
 % }
   <a class=view href="<% $url |h %>">
-    <img src="<% $vw |h %>">
+    <picture>
+% my ($hoff, $voff) = (60, 480);
+% SIZE: for (my $i = 0; $i < @imgsz; $i++) {
+%   my $scale = $imgsz[$i];
+%   last SIZE unless exists $vw{$scale};
+%   my $scsz = $SIZE{$scale};
+%   my $f = $scsz/$max;
+%   my ($thiswd, $thisht) = map int, ($f*$wd + $hoff, $f*$ht + $voff);
+      <source srcset="<% $vw{$scale} |h %>"
+             media="(max-width: <% $thiswd %>px) or (max-height: <% $thisht %>px)">
+% }
+      <img src="<% "$IMGURL/$path" |hu %>">
+    </picture>
   </a>
 % if ($link{next}) {
   <div class=next><a class=next href="<% "$pre/$link{next}" |hu %>">&rsaquo;</a></div>

diff --git a/static/tgal.css b/static/tgal.css
index aa64878..73e3933 100644 (file)
--- a/static/tgal.css
+++ b/static/tgal.css
@@ -150,6 +150,11 @@ a.view {
 }
 a:link:hover.view { background: inherit; }
 
+a.view picture {
+       display: flex; flex-direction: column;
+       flex-grow: 1; flex-basis: 0;
+}
+
 a.view img {
        min-width: 0; min-height: 0;
        max-width: 100%; max-height: 100%;