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 4676769a462d1e735c54aa3a30b0bd8d947ae24d..0c834b9283ec32df41f580918464aeec1b02aa3d 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 aa648784adc822b950d3cc803581179d5ef130ad..73e393320c8156c16bcab340d93199701b08c651 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%;