From a42b51cbe00c765981a53918f7532d67c4b650ad Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 20 Mar 2025 18:08:48 -0300 Subject: 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. --- src/static/js/client/image-overlay.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'src/static/js/client') 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); -- cgit 1.3.0-6-gf8a5