diff options
author | Daniel Friesel <derf@finalrewind.org> | 2021-04-08 12:08:23 +0200 |
---|---|---|
committer | Daniel Friesel <derf@finalrewind.org> | 2021-04-08 12:08:23 +0200 |
commit | aa76f442a611c7fe60bb0d8bfa53fcc334d2dda8 (patch) | |
tree | 1106a707fe82eeaa74904ce89956686983890bc7 | |
parent | 9b243c81dac2a08e3cc1436d28903433b7c6f1da (diff) |
create thumbnails at 2x resolution for high-dpi displays
-rwxr-xr-x | bin/dthumb | 5 | ||||
-rwxr-xr-x | lib/App/Dthumb.pm | 10 | ||||
-rw-r--r-- | share/css/main.css | 9 |
3 files changed, 16 insertions, 8 deletions
@@ -123,8 +123,9 @@ Also include directories in the file listing =item B<-d>, B<--size> I<maxsize> (default: 200) -Set maximum thumbnail size. Thumbnails are created so that neither width nor -height exceed I<maxsize> 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<float> (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 */; +} |