}
(my $nosl = $path) =~ s!/$!!;
- my $size = "medthumb";
+ my @size = ("smallthumb", "medthumb", "bigthumb");
my %tn;
- my (%nd, %nf);
- for my $f (@$ff)
- { $tn{$f} = TrivGal::Image->new($path . $f->name)->scale($size); }
+ my %count;
+ for my $f (@$ff) {
+ my $img = TrivGal::Image->new($path . $f->name);
+ for my $size (@size) { $tn{$f}{$size} = $img->scale($size); }
+ }
for my $d (@$dd) {
my $p = join_paths $path, $d->name;
my ($ddd, $fff, $iii);
($ddd, $fff, $iii) = listdir join_paths $IMGROOT, $p;
- $nd{$d} = @$ddd; $nf{$d} = @$fff;
+
+ my $count = "";
+ $count .= scalar(@$ddd) . "/" if @$ddd;
+ $count .= scalar(@$fff) if @$fff;
+ $count{$d} = $count;
+
DIR: for (;;) {
if (defined $iii) {
my $index = join_paths $p, $iii->name;
- $tn{$d} = TrivGal::Image->new($index)->scale($size);
+ my $img = TrivGal::Image->new($index);
+ for my $size (@size) { $tn{$d}{$size} = $img->scale($size); }
last DIR;
}
if (!@$ddd) { $tn{$d} = undef; last DIR; }
%
% if (@$dd) {
<h2>Subfolders</h2>
+% for my $size (@size) {
<div class="gallery <% $size %>">
-% for my $d (@$dd) {
-% my $count = "";
-% $count .= "$nd{$d}/" if $nd{$d};
-% $count .= "$nf{$d}" if $nf{$d};
+% for my $d (@$dd) {
<& .thumbnail, target => $d->name, comment => $d->comment,
- tn => $tn{$d}, size => $size,
+ tn => $tn{$d}{$size}, size => $size,
caption =>
- $m->interp->apply_escapes($d->name, "h") . " [$count]" &>\
-% }
+ $m->interp->apply_escapes($d->name, "h") .
+ " [$count{$d}]" &>\
+% }
</div>
+% }
% }
%
% if (@$ff) {
<h2>Images</h2>
+% for my $size (@size) {
<div class="gallery <% $size %>">
-% for my $f (@$ff) {
+% for my $f (@$ff) {
<& .thumbnail, target => $f->name, comment => $f->comment,
- tn => $tn{$f}, size => $size,
+ tn => $tn{$f}{$size}, size => $size,
caption => $m->interp->apply_escapes($f->name, "h") &>\
-% }
+% }
</div>
+% }
% }
%
<div class=fill></div>
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];
}
my $links = "";
- my $pre =
- urlencode join_paths $SCRIPTURL, $dir;
+ my $pre = urlencode join_paths $SCRIPTURL, $dir;
for my $rel (qw{up first prev next last}) {
- exists $link{$rel} and
- $links .= sprintf " <link rel=%s href=\"%s\">\n",
- $rel, urlencode "$pre/$link{$rel}";
+ $links .= sprintf " <link rel=%s href=\"%s\">\n", $rel,
+ urlencode "$pre/$link{$rel}"
+ if exists $link{$rel};
}
</%perl>
%
%
<div class=viewnav>
% if ($link{prev}) {
- <div class=prev><a class=prev href="<% "$pre/$link{prev}" |hu %>">‹</a></div>
+ <div class=prev>
+ <a class=nav title="Previous image" href="<% "$pre/$link{prev}" |hu %>">
+ <svg width="50" height="80" viewBox="-25 -40 50 80">
+ <path class="fg" stroke="none"
+ d="m+1,0 +6,-11 -2,-1 -12,+12 +12,+12 +2,-1 z"/>
+ </svg>
+ </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>
+ <div class=next>
+ <a class=nav title="Next image" href="<% "$pre/$link{next}" |hu %>">
+ <svg width="50" height="80" viewBox="-25 -40 50 80">
+ <path class="fg" stroke="none"
+ d="m-1,0 -6,-11 +2,-1 +12,+12 -12,+12 -2,-1 z"/>
+ </svg>
+ </a>
+ </div>
% }
</div>
%