From 029210cc329a015a939472a688209d3f3423242b Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 30 May 2023 09:51:26 -0300 Subject: thumbs, content: integrate cached thumb sizes into content --- src/content/dependencies/image.js | 85 ++++++++++++++++++++++++++++----------- 1 file changed, 61 insertions(+), 24 deletions(-) (limited to 'src/content') diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js index 71b905f7..905b3c2e 100644 --- a/src/content/dependencies/image.js +++ b/src/content/dependencies/image.js @@ -2,10 +2,12 @@ import {empty} from '#sugar'; export default { extraDependencies: [ - 'getSizeOfImageFile', + 'getDimensionsOfImagePath', + 'getSizeOfImagePath', + 'getThumbnailEqualOrSmaller', + 'getThumbnailsAvailableForDimensions', 'html', 'language', - 'thumb', 'to', ], @@ -52,10 +54,12 @@ export default { }, generate(data, slots, { - getSizeOfImageFile, + getDimensionsOfImagePath, + getSizeOfImagePath, + getThumbnailEqualOrSmaller, + getThumbnailsAvailableForDimensions, html, language, - thumb, to, }) { let originalSrc; @@ -68,12 +72,6 @@ export default { originalSrc = ''; } - const thumbSrc = - originalSrc && - (slots.thumb - ? thumb[slots.thumb](originalSrc) - : originalSrc); - const willLink = typeof slots.link === 'string' || slots.link; const customLink = typeof slots.link === 'string'; @@ -95,18 +93,6 @@ export default { slots.missingSourceContent)); } - let fileSize = null; - if (willLink) { - const mediaRoot = to('media.root'); - if (originalSrc.startsWith(mediaRoot)) { - fileSize = - getSizeOfImageFile( - originalSrc - .slice(mediaRoot.length) - .replace(/^\//, '')); - } - } - let reveal = null; if (willReveal) { reveal = [ @@ -119,16 +105,67 @@ export default { ]; } + let mediaSrc = null; + if (originalSrc.startsWith(to('media.root'))) { + mediaSrc = + originalSrc + .slice(to('media.root').length) + .replace(/^\//, ''); + } + + let thumbSrc = null; + if (mediaSrc) { + // Note: This provides mediaSrc to getThumbnailEqualOrSmaller, since + // it's the identifier which thumbnail utilities use to query from the + // thumbnail cache. But we use the result to operate on originalSrc, + // which is the HTML output-appropriate path including `../../` or + // another alternate base path. + const selectedSize = getThumbnailEqualOrSmaller(slots.thumb, mediaSrc); + thumbSrc = originalSrc.replace(/\.(jpg|png)$/, `.${selectedSize}.jpg`); + } + + let originalWidth = null; + let originalHeight = null; + let availableThumbs = null; + if (mediaSrc) { + [originalWidth, originalHeight] = + getDimensionsOfImagePath(mediaSrc); + availableThumbs = + getThumbnailsAvailableForDimensions([originalWidth, originalHeight]); + } + + let fileSize = null; + if (willLink && mediaSrc) { + fileSize = getSizeOfImagePath(mediaSrc); + } + const imgAttributes = { id: idOnImg, class: classOnImg, alt: slots.alt, width: slots.width, height: slots.height, - 'data-original-size': fileSize, - 'data-no-image-preview': customLink, }; + if (customLink) { + imgAttributes['data-no-image-preview'] = true; + } + + if (fileSize) { + imgAttributes['data-original-size'] = fileSize; + } + + if (originalWidth && originalHeight) { + imgAttributes['data-original-length'] = Math.max(originalWidth, originalHeight); + } + + if (!empty(availableThumbs)) { + imgAttributes['data-thumbs'] = + availableThumbs + .map(([name, size]) => `${name}:${size}`) + .join(' '); + } + const nonlazyHTML = originalSrc && prepare( -- cgit 1.3.0-6-gf8a5