diff options
| -rw-r--r-- | src/content/dependencies/image.js | 43 | ||||
| -rw-r--r-- | src/static/site6.css | 6 | ||||
| -rw-r--r-- | tap-snapshots/test/snapshot/image.js.test.cjs | 30 |
3 files changed, 37 insertions, 42 deletions
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js index bc52321a..a39acca3 100644 --- a/src/content/dependencies/image.js +++ b/src/content/dependencies/image.js @@ -136,12 +136,17 @@ export default { slots.height && {height: slots.height}, ]); - if (!originalSrc || isMissingImageFile) { - return prepare( - html.tag('div', {class: 'image-text-area'}, - (html.isBlank(slots.missingSourceContent) - ? language.$('misc.missingImage') - : slots.missingSourceContent))); + const isPlaceholder = + !originalSrc || isMissingImageFile; + + if (isPlaceholder) { + return ( + prepare( + html.tag('div', {class: 'image-text-area'}, + (html.isBlank(slots.missingSourceContent) + ? language.$('misc.missingImage') + : slots.missingSourceContent)), + 'visible')); } let reveal = null; @@ -314,15 +319,6 @@ export default { html.tag('div', {class: 'image-outer-area'}, wrapped); - if (willReveal) { - wrapped = - html.tag('div', {class: 'reveal'}, - images.revealStatic && - {class: 'has-reveal-thumbnail'}, - - wrapped); - } - if (willSquare) { wrapped = html.tag('div', {class: 'square-content'}, @@ -331,17 +327,24 @@ export default { wrapped = html.tag('div', {class: 'image-container'}, - willLink && - {class: 'has-link'}, - willSquare && {class: 'square'}, typeof slots.link === 'string' && {class: 'no-image-preview'}, - !originalSrc && - {class: 'placeholder-image'}, + (isPlaceholder + ? {class: 'placeholder-image'} + : [ + willLink && + {class: 'has-link'}, + + willReveal && + {class: 'reveal'}, + + revealSrc && + {class: 'has-reveal-thumbnail'}, + ]), visibility === 'hidden' && {class: 'js-hide'}, diff --git a/src/static/site6.css b/src/static/site6.css index b00dd595..3ad438c6 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -1171,12 +1171,6 @@ img.pixelate, .pixelate img { image-rendering: crisp-edges; } -.reveal { - position: relative; - width: 100%; - height: 100%; -} - .reveal-text-container { position: absolute; top: 15px; diff --git a/tap-snapshots/test/snapshot/image.js.test.cjs b/tap-snapshots/test/snapshot/image.js.test.cjs index ffc7d43a..5661c9c7 100644 --- a/tap-snapshots/test/snapshot/image.js.test.cjs +++ b/tap-snapshots/test/snapshot/image.js.test.cjs @@ -6,21 +6,19 @@ */ 'use strict' exports[`test/snapshot/image.js > TAP > image (snapshot) > content warnings via tags 1`] = ` -<div class="image-container"> - <div class="reveal"> - <div class="image-outer-area"> - <div class="image-inner-area"> - <img class="image" src="media/album-art/beyond-canon/cover.png"> - <span class="reveal-text-container"> - <span class="reveal-text"> - <img class="reveal-symbol" src="static/warning.svg?413"> - <br> - <span class="reveal-warnings">too cool for school</span> - <br> - <span class="reveal-interaction">click to show</span> - </span> +<div class="image-container reveal"> + <div class="image-outer-area"> + <div class="image-inner-area"> + <img class="image" src="media/album-art/beyond-canon/cover.png"> + <span class="reveal-text-container"> + <span class="reveal-text"> + <img class="reveal-symbol" src="static/warning.svg?413"> + <br> + <span class="reveal-warnings">too cool for school</span> + <br> + <span class="reveal-interaction">click to show</span> </span> - </div> + </span> </div> </div> </div> @@ -36,11 +34,11 @@ exports[`test/snapshot/image.js > TAP > image (snapshot) > link with file size 1 ` exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path 1`] = ` -<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">(This image file is missing)</div></div></div></div> +<div class="image-container placeholder-image"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">(This image file is missing)</div></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path w/ missingSourceContent 1`] = ` -<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">Cover's missing, whoops</div></div></div></div> +<div class="image-container placeholder-image"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">Cover's missing, whoops</div></div></div></div> ` exports[`test/snapshot/image.js > TAP > image (snapshot) > source missing 1`] = ` |