diff options
| -rw-r--r-- | src/content/dependencies/transformContent.js | 12 | ||||
| -rw-r--r-- | src/static/site6.css | 6 | ||||
| -rw-r--r-- | tap-snapshots/test/snapshot/transformContent.js.test.cjs | 6 |
3 files changed, 15 insertions, 9 deletions
diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js index ff893896..ddf82391 100644 --- a/src/content/dependencies/transformContent.js +++ b/src/content/dependencies/transformContent.js @@ -385,7 +385,7 @@ export default { type: 'image', inline: false, data: - html.tag('div', {class: 'content-image'}, + html.tag('div', {class: 'content-image-container'}, image.slots({ src, @@ -394,10 +394,12 @@ export default { height: height ?? null, thumb: slots.thumb, - attributes: - (pixelate - ? {class: 'pixelate'} - : null), + attributes: [ + {class: 'content-image'}, + + pixelate && + {class: 'pixelate'}, + ], })), }; } diff --git a/src/static/site6.css b/src/static/site6.css index 2058e984..cd00a721 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -739,11 +739,15 @@ ul.image-details li { display: none; } -.content-image { +.content-image-container { margin-top: 1em; margin-bottom: 1em; } +.content-image { + display: inline-block !important; +} + .image-link { display: block; overflow: hidden; diff --git a/tap-snapshots/test/snapshot/transformContent.js.test.cjs b/tap-snapshots/test/snapshot/transformContent.js.test.cjs index dd4b8759..8dfa7b0f 100644 --- a/tap-snapshots/test/snapshot/transformContent.js.test.cjs +++ b/tap-snapshots/test/snapshot/transformContent.js.test.cjs @@ -92,16 +92,16 @@ How it goes</p> ` exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > non-inline image #1 1`] = ` -<div class="content-image">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large' }]</div> +<div class="content-image-container">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large', attributes: [ { class: 'content-image' }, undefined ] }]</div> ` exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > non-inline image #2 1`] = ` <p>Rad.</p> -<div class="content-image">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large' }]</div> +<div class="content-image-container">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large', attributes: [ { class: 'content-image' }, undefined ] }]</div> ` exports[`test/snapshot/transformContent.js > TAP > transformContent (snapshot) > non-inline image #3 1`] = ` -<div class="content-image">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large' }]</div> +<div class="content-image-container">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large', attributes: [ { class: 'content-image' }, undefined ] }]</div> <p>Baller.</p> ` |