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.
my $urldir = join_paths $SCRIPTURL, $dir;
my ($dd, $ff, $ii) = listdir $realdir;
my @thumbsz = qw{smallthumb medthumb bigthumb};
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 $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); }
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];
}
defined $fi or die "image not found in its folder?";
my $this = $ff->[$fi];
<div class=prev><a class=prev href="<% "$pre/$link{prev}" |hu %>">‹</a></div>
% }
<a class=view href="<% $url |h %>">
<div class=prev><a class=prev href="<% "$pre/$link{prev}" |hu %>">‹</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 %>">›</a></div>
</a>
% if ($link{next}) {
<div class=next><a class=next href="<% "$pre/$link{next}" |hu %>">›</a></div>
}
a:link:hover.view { background: inherit; }
}
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%;
a.view img {
min-width: 0; min-height: 0;
max-width: 100%; max-height: 100%;