From aa76f442a611c7fe60bb0d8bfa53fcc334d2dda8 Mon Sep 17 00:00:00 2001 From: Daniel Friesel Date: Thu, 8 Apr 2021 12:08:23 +0200 Subject: create thumbnails at 2x resolution for high-dpi displays --- bin/dthumb | 5 +++-- lib/App/Dthumb.pm | 10 ++++++---- share/css/main.css | 9 +++++++-- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/bin/dthumb b/bin/dthumb index 6e94c84..4eec878 100755 --- a/bin/dthumb +++ b/bin/dthumb @@ -123,8 +123,9 @@ Also include directories in the file listing =item B<-d>, B<--size> I (default: 200) -Set maximum thumbnail size. Thumbnails are created so that neither width nor -height exceed I pixels. +Set maximum thumbnail size. Both width and height will be limited while +preserving aspect ratio. Thumbnails are created at 2x resolution and +downscaled via HTML tags to accomodate high-DPI displays. =item B<-s>, B<--spacing> I (default: 1.1) diff --git a/lib/App/Dthumb.pm b/lib/App/Dthumb.pm index 74face3..229a3c1 100755 --- a/lib/App/Dthumb.pm +++ b/lib/App/Dthumb.pm @@ -38,9 +38,11 @@ sub new { $ref->{data} = App::Dthumb::Data->new(); $ref->{data}->set_vars( - title => $conf{title}, - width => $conf{size} * $conf{spacing} . 'px', - height => $conf{size} * $conf{spacing} . 'px', + title => $conf{title}, + boxwidth => $conf{size} * $conf{spacing} . 'px', + boxheight => $conf{size} * $conf{spacing} . 'px', + imgwidth => $conf{size} . 'px', + imgheight => $conf{size} . 'px', ); $ref->{html} = $ref->{data}->get('html_start.dthumb'); @@ -192,7 +194,7 @@ sub create_thumbnail_image { my ( $self, $file ) = @_; my $thumbdir = $self->{config}->{dir_thumbs}; - my $thumb_dim = $self->{config}->{size}; + my $thumb_dim = $self->{config}->{size} * 2; if ( -e "${thumbdir}/${file}" and not $self->{config}->{recreate} diff --git a/share/css/main.css b/share/css/main.css index 5554843..ad451ad 100644 --- a/share/css/main.css +++ b/share/css/main.css @@ -2,10 +2,15 @@ div.image-container { text-align: center; font-size: 80%; float: left; - width: /* $width */; - height: /* $height */; + width: /* $boxwidth */; + height: /* $boxheight */; } div.image-container a { text-decoration: none; } + +div.image-container img { + max-width: /* $imgwidth */; + max-height: /* $imgheight */; +} -- cgit v1.2.3