From aa76f442a611c7fe60bb0d8bfa53fcc334d2dda8 Mon Sep 17 00:00:00 2001
From: Daniel Friesel <derf@finalrewind.org>
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<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 */;
+}
-- 
cgit v1.2.3