Scale the thumbnails according to the window width. I think this is the
most useful thing to do here.
}
(my $nosl = $path) =~ s!/$!!;
}
(my $nosl = $path) =~ s!/$!!;
+ my @size = ("smallthumb", "medthumb", "bigthumb");
- for my $f (@$ff)
- { $tn{$f} = TrivGal::Image->new($path . $f->name)->scale($size); }
+ 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);
for my $d (@$dd) {
my $p = join_paths $path, $d->name;
my ($ddd, $fff, $iii);
DIR: for (;;) {
if (defined $iii) {
my $index = join_paths $p, $iii->name;
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; }
last DIR;
}
if (!@$ddd) { $tn{$d} = undef; last DIR; }
%
% if (@$dd) {
<h2>Subfolders</h2>
%
% if (@$dd) {
<h2>Subfolders</h2>
+% for my $size (@size) {
<div class="gallery <% $size %>">
<div class="gallery <% $size %>">
<& .thumbnail, target => $d->name, comment => $d->comment,
<& .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{$d}]" &>\
caption =>
$m->interp->apply_escapes($d->name, "h") .
" [$count{$d}]" &>\
% }
%
% if (@$ff) {
<h2>Images</h2>
% }
%
% if (@$ff) {
<h2>Images</h2>
+% for my $size (@size) {
<div class="gallery <% $size %>">
<div class="gallery <% $size %>">
<& .thumbnail, target => $f->name, comment => $f->comment,
<& .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") &>\
caption => $m->interp->apply_escapes($f->name, "h") &>\
% }
%
<div class=fill></div>
% }
%
<div class=fill></div>
flex-direction: row; flex-wrap: wrap;
align-items: start; justify-content: space-evenly;
}
flex-direction: row; flex-wrap: wrap;
align-items: start; justify-content: space-evenly;
}
-div.gallery.medthumb { display: flex; }
figure.thumb {
display: inline-block;
figure.thumb {
display: inline-block;
figcaption { text-align: center; }
figcaption span.name { font-family: sans-serif; }
figcaption span.comment { font-style: italic; margin-inline-start: 1em; }
figcaption { text-align: center; }
figcaption span.name { font-family: sans-serif; }
figcaption span.comment { font-style: italic; margin-inline-start: 1em; }
+.smallthumb figcaption { font-size: 80%; }
div.viewnav {
flex-grow: 1; flex-basis: 0;
div.viewnav {
flex-grow: 1; flex-basis: 0;
flex-direction: row; align-self: center;
}
flex-direction: row; align-self: center;
}
-div.thumbstrip.smallthumb { display: flex; }
-div.thumbstrip.medthumb { display: none; }
-div.thumbstrip.bigthumb { display: none; }
+div.thumbstrip.smallthumb, div.gallery.smallthumb { display: flex; }
+div.thumbstrip.medthumb, div.gallery.medthumb { display: none; }
+div.thumbstrip.bigthumb, div.gallery.bigthumb { display: none; }
@media (min-height: 1200px) and (max-height: 1599px) {
div.thumbstrip.smallthumb { display: none; }
div.thumbstrip.medthumb { display: flex; }
@media (min-height: 1200px) and (max-height: 1599px) {
div.thumbstrip.smallthumb { display: none; }
div.thumbstrip.medthumb { display: flex; }
div.thumbstrip.medthumb { display: none; }
div.thumbstrip.bigthumb { display: flex; }
}
div.thumbstrip.medthumb { display: none; }
div.thumbstrip.bigthumb { display: flex; }
}
+@media (min-width: 760px) and (max-width: 1079px) {
+ div.gallery.smallthumb { display: none; }
+ div.gallery.medthumb { display: flex; }
+ div.gallery.bigthumb { display: none; }
+}
+@media (min-width: 1080px) {
+ div.gallery.smallthumb { display: none; }
+ div.gallery.medthumb { display: none; }
+ div.gallery.bigthumb { display: flex; }
+}
/*----- That's all, folks -------------------------------------------------*/
/*----- That's all, folks -------------------------------------------------*/