From a9816531cffef56b34f2abf705e4b3fe360900f9 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Thu, 25 Jan 2024 11:46:46 +0100
Subject: [PATCH] add tool to debug image
---
config.yaml | 8 +-
.../partials/blocks/templates/pages/list.html | 12 +-
layouts/partials/footer/debug.html | 107 +++++++++++++++---
3 files changed, 106 insertions(+), 21 deletions(-)
diff --git a/config.yaml b/config.yaml
index 105a8f1b..15c4c641 100644
--- a/config.yaml
+++ b/config.yaml
@@ -108,7 +108,7 @@ params:
chapter:
mobile: 350
tablet: 450
- desktop: 1280
+ desktop: 800
features:
mobile: 350
tablet: 400
@@ -126,6 +126,10 @@ params:
tablet: 100
desktop: 255
pages:
+ list:
+ mobile: 400
+ tablet: 800
+ desktop: 300
large:
mobile: 400
tablet: 800
@@ -209,7 +213,7 @@ params:
item:
mobile: 350
tablet: 990
- desktop: 900
+ desktop: 600
papers:
hero:
mobile: 400
diff --git a/layouts/partials/blocks/templates/pages/list.html b/layouts/partials/blocks/templates/pages/list.html
index 1b0a758b..879d74d6 100644
--- a/layouts/partials/blocks/templates/pages/list.html
+++ b/layouts/partials/blocks/templates/pages/list.html
@@ -28,7 +28,17 @@
</div>
{{ if $show_images }}
- {{- partial "pages/page-media.html" . -}}
+ <div class="media">
+ {{- if .Params.image -}}
+ {{- partial "commons/image.html"
+ (dict
+ "image" .Params.image
+ "sizes" site.Params.image_sizes.blocks.pages.list
+ ) -}}
+ {{- else -}}
+ {{- partial "commons/image-default.html" -}}
+ {{- end -}}
+ </div>
{{ end }}
</article>
{{ else }}
diff --git a/layouts/partials/footer/debug.html b/layouts/partials/footer/debug.html
index d1f61123..fb2fa584 100644
--- a/layouts/partials/footer/debug.html
+++ b/layouts/partials/footer/debug.html
@@ -145,6 +145,36 @@
}
}
+ .img-debug {
+ font-size: 1.1rem;
+ line-height: 1.2;
+ padding: 10px;
+ background-color: white;
+ color: black;
+ display: block;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ font-family: sans-serif;
+ white-space: nowrap;
+ opacity: 0.9;
+ }
+
+ .img-debug small {
+ font-size: 0.9rem;
+ font-family: sans-serif;
+ display: none;
+ }
+
+ .img-debug:hover small {
+ display: block;
+ }
+
+ .img-debug.is-bad {
+ background: tomato;
+ color: black;
+ }
+
</style>
<script>
@@ -157,6 +187,9 @@
if (e.ctrlKey && e.key === 'w') {
document.body.classList.toggle('full-width');
}
+ if (e.ctrlKey && e.key === 'i') {
+ showImageDimension();
+ }
});
window.addEventListener('pointermove', e => {
@@ -174,23 +207,61 @@
})
})
- function responsiveImageDebugOutput(img) {
- if (!img) {
- throw new TypeError("Expected an image node. Got none.");
- }
- const listener = function () {
- const pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;
- const dimensionWidth = img.naturalWidth * pixelRatio;
- const dimensionHeight = img.naturalHeight * pixelRatio;
- console.log(`
- -------------------------
- Rendered size: ${img.width}x${img.height}
- Intrinsic size: ${dimensionWidth}x${dimensionHeight}
- Device Pixel Ratio: ${window.devicePixelRatio}
- -------------------------
- `);
- };
- if (img.complete) listener();
- //img.addEventListener('load', listener);
+ function showImageDimension() {
+ document.querySelectorAll('img').forEach(img => {
+ const listener = function () {
+ // Return if svg
+ if (img.src.split('.')[1] === 'svg') return;
+
+ const threshold = 0.2, // 20% of tolerance
+ parent = img.parentElement,
+ pixelRatio = window.devicePixelRatio,
+ dimensions = {
+ width: img.naturalWidth * pixelRatio,
+ height: img.naturalHeight * pixelRatio
+ },
+ target = {
+ width: img.width * window.devicePixelRatio,
+ height: img.height * window.devicePixelRatio
+ },
+ essential =
+`<b>Loaded</b> : ${dimensions.width}x${dimensions.height}\n
+<b>Needed</b> : ${target.width}x${target.height}`,
+ result =`
+ Rendered size: ${img.width}x${img.height}
+ Intrinsic size: ${dimensions.width}x${dimensions.height}
+ Device Pixel ratio: ${window.devicePixelRatio}`,
+ p = parent.querySelector('.img-debug') || document.createElement('p'),
+ small = document.createElement('small');
+
+ small.innerText = result;
+ p.innerHTML = essential
+ p.append(small);
+ p.classList.add('img-debug');
+ const ratio = getImageRatio(dimensions, target)
+ if (ratio > threshold) {
+ p.classList.add('is-bad');
+ } else {
+ p.classList.remove('is-bad');
+ }
+
+ const debug = img.querySelector('.img-debug');
+ if (debug) parent.removeChild();
+
+ parent.append(p);
+ parent.style.position = 'relative';
+ };
+
+ if (img.complete) listener();
+ img.addEventListener('load', listener);
+ window.addEventListener('resize', listener);
+ });
+ }
+
+ function getImageRatio(source, target) {
+ const widthRatio = Math.abs((source.width - target.width) / Math.max(source.width, target.width)),
+ heightRatio = Math.abs((source.height - target.height) / Math.max(source.height, target.height));
+
+ return (widthRatio + heightRatio) / 2;
}
</script>
\ No newline at end of file
--
GitLab