% my $tn;
% if ($iii) { $tn = join_paths $path, $d->name, $iii->name; }
% else { $tn = undef; }
- <& .thumbnail, target => $d->name . "/", img => $tn,
- caption => $m->interp->apply_escapes($d->name, "h"),
- comment => $d->comment &>\
+ <& .thumbnail, target => $d->name . "/", comment => $d->comment,
+ img => $tn, size => "bigthumb",
+ caption => $m->interp->apply_escapes($d->name, "h") &>\
% }
</div>
% }
<h2>Images</h2>
<div class=gallery>
% for my $f (@$ff) {
- <& .thumbnail, target => $f->name, img => $path . $f->name,
- caption => $m->interp->apply_escapes($f->name, "h"),
- comment => $f->comment &>\
+ <& .thumbnail, target => $f->name, comment => $f->comment,
+ img => $path . $f->name, size => "bigthumb",
+ caption => $m->interp->apply_escapes($f->name, "h") &>\
% }
</div>
% }
%
<div class=thumbstrip>
% for my $f (@$ff) {
- <& .thumbnail, target => $f->name, img => $dir . "/" . $f->name,
+% my $img = $dir . "/" . $f->name;
+ <& .thumbnail, target => $f->name, img => $img, size => "bigthumb",
caption => $m->interp->apply_escapes($f->name, "h"),
focus => $f->name eq "$base$ext" &>\
% }
%###-------------------------------------------------------------------------
<%def .thumbnail>\
% my $tn;
-% if (defined $img) { $tn = scaled "thumb", $img; }
+% if (defined $img) { $tn = scaled $size, $img; }
% else { $tn = "$STATICURL/folder.svg"; }
% if ($focus) {
- <figure class=thumb id=focusthumb>
- <img class=thumb load=lazy src="<% $tn |u %>">
+ <figure class="thumb <% $size %>" id=focusthumb>
+ <img class="thumb <% $size %>" load=lazy src="<% $tn |u %>">
<figcaption><span class=name><% $caption %></span></figcaption>
% } else {
- <figure class=thumb>
+ <figure class="thumb <% $size %>">
<a class=thumb href="<% $target |u %>">
- <img class=thumb load=lazy src="<% $tn |u %>">
+ <img class="thumb <% $size %>" load=lazy src="<% $tn |u %>">
<figcaption>
<span class=name><% $caption %></span>
% if (defined $comment) {
<%args>
$target
$img
+ $size
$caption
$comment => undef
$focus => 0
figure.thumb {
display: inline-block;
vertical-align: top;
- width: 228px;
margin: 1em;
}
-
a.thumb:link { display: inline-block; }
+img.thumb { object-fit: contain; }
-img.thumb {
- width: 228px; height: 228px;
- object-fit: contain;
-}
+figure.bigthumb { width: 228px; }
+img.bigthumb { width: 228px; height: 228px; }
div.comment {
border: thin black solid;
margin-top: 2ex; margin-bottom: 2ex;
}
-figure.thumb figcaption {
- display: block;
- width: 228px;
-}
+figure.thumb figcaption { display: block; }
figcaption { text-align: center; }
figcaption span.name { font-family: sans-serif; }
figcaption span.comment { font-style: italic; margin-inline-start: 1em; }