content, client: image-overlay: set thumb aspect ratio

Although the thumbnail image width automatically matches
the width of the main image, the height by default will
be a multiple of the thumbnail's own height, which may
result in a mismatched aspect ratio due to the much
lower accuracy of thumbnail intrinsic dimensions.

3 files changed, 22 insertions, 3 deletions

diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 8a446c39..bc268ec1 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -224,7 +224,6 @@ export default {
 
       const originalDimensions = getDimensionsOfImagePath(mediaSrc);
       const availableThumbs = getThumbnailsAvailableForDimensions(originalDimensions);
-      const originalLength = Math.max(originalDimensions[0], originalDimensions[1]);
 
       const fileSize =
         (willLink && mediaSrc
@@ -235,8 +234,7 @@ export default {
         fileSize &&
           {'data-original-size': fileSize},
 
-        originalLength &&
-          {'data-original-length': originalLength},
+        {'data-dimensions': originalDimensions.join('x')},
 
         !empty(availableThumbs) &&
           {'data-thumbs':
diff --git a/src/content/dependencies/linkPathFromMedia.js b/src/content/dependencies/linkPathFromMedia.js
index be72a113..d71c69f8 100644
--- a/src/content/dependencies/linkPathFromMedia.js
+++ b/src/content/dependencies/linkPathFromMedia.js
@@ -44,6 +44,8 @@ export default {
         fileSize &&
           {'data-original-size': fileSize},
 
+        {'data-dimensions': dimensions.join('x')},
+
         !empty(availableThumbs) &&
           {'data-thumbs':
               availableThumbs
diff --git a/src/static/js/client/image-overlay.js b/src/static/js/client/image-overlay.js
index 8ff3e81c..13a891bd 100644
--- a/src/static/js/client/image-overlay.js
+++ b/src/static/js/client/image-overlay.js
@@ -159,6 +159,11 @@ function getImageLinkDetails(imageLink) {
       a.dataset.thumbs ??
       null,
 
+    dimensions:
+      img?.dataset.dimensions?.split('x') ??
+      a.dataset.dimensions?.split('x') ??
+      null,
+
     color:
       cssProp(imageLink, '--primary-color'),
   };
@@ -231,6 +236,20 @@ async function loadOverlayImage(details) {
   info.mainImage.dataset.displayingThumb = details.mainThumb;
   info.thumbImage.dataset.displayingThumb = details.thumbThubm;
 
+  if (details.dimensions) {
+    info.mainImage.width = details.dimensions[0];
+    info.mainImage.height = details.dimensions[1];
+    info.thumbImage.width = details.dimensions[0];
+    info.thumbImage.height = details.dimensions[1];
+    cssProp(info.thumbImage, 'aspect-ratio', details.dimensions.join('/'));
+  } else {
+    info.mainImage.removeAttribute('width');
+    info.mainImage.removeAttribute('height');
+    info.thumbImage.removeAttribute('width');
+    info.thumbImage.removeAttribute('height');
+    cssProp(info.thumbImage, 'aspect-ratio', null);
+  }
+
   info.mainImage.addEventListener('load', handleMainImageLoaded);
   info.mainImage.addEventListener('error', handleMainImageErrored);