diff options
| -rw-r--r-- | src/content/dependencies/image.js | 7 | ||||
| -rw-r--r-- | src/static/client2.js | 16 |
2 files changed, 16 insertions, 7 deletions
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js index 6c0aeecd..8aa9753b 100644 --- a/src/content/dependencies/image.js +++ b/src/content/dependencies/image.js @@ -77,6 +77,11 @@ export default { originalSrc = ''; } + // TODO: This feels janky. It's necessary to deal with static content that + // includes strings like <img src="media/misc/foo.png">, but processing the + // src string directly when a parts-formed path *is* available seems wrong. + // It should be possible to do urls.from(slots.path[0]).to(...slots.path), + // for example, but will require reworking the control flow here a little. let mediaSrc = null; if (originalSrc.startsWith(to('media.root'))) { mediaSrc = @@ -160,7 +165,7 @@ export default { // 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`); + thumbSrc = to('thumb.path', mediaSrc.replace(/\.(png|jpg)$/, `.${selectedSize}.jpg`)); const dimensions = getDimensionsOfImagePath(mediaSrc); availableThumbs = getThumbnailsAvailableForDimensions(dimensions); diff --git a/src/static/client2.js b/src/static/client2.js index 758d91a6..523b48d8 100644 --- a/src/static/client2.js +++ b/src/static/client2.js @@ -954,10 +954,14 @@ function handleImageLinkClicked(evt) { const thumbImage = document.getElementById('image-overlay-image-thumb'); const {href: originalSrc} = evt.target.closest('a'); - const {dataset: { - originalSize: originalFileSize, - thumbs: availableThumbList, - }} = evt.target.closest('a').querySelector('img'); + + const { + src: embeddedSrc, + dataset: { + originalSize: originalFileSize, + thumbs: availableThumbList, + }, + } = evt.target.closest('a').querySelector('img'); updateFileSizeInformation(originalFileSize); @@ -967,8 +971,8 @@ function handleImageLinkClicked(evt) { if (availableThumbList) { const {thumb: mainThumb, length: mainLength} = getPreferredThumbSize(availableThumbList); const {thumb: smallThumb, length: smallLength} = getSmallestThumbSize(availableThumbList); - mainSrc = originalSrc.replace(/\.(jpg|png)$/, `.${mainThumb}.jpg`); - thumbSrc = originalSrc.replace(/\.(jpg|png)$/, `.${smallThumb}.jpg`); + mainSrc = embeddedSrc.replace(/\.[a-z]+\.(jpg|png)$/, `.${mainThumb}.jpg`); + thumbSrc = embeddedSrc.replace(/\.[a-z]+\.(jpg|png)$/, `.${smallThumb}.jpg`); // Show the thumbnail size on each <img> element's data attributes. // Y'know, just for debugging convenience. mainImage.dataset.displayingThumb = `${mainThumb}:${mainLength}`; |