I am relying on gumlet.js to retrieve images and figuring out the correct width of the image when retrieving it.
Unfortunately gumlet.js picks much larger images than I think it should be. See this example:
Can you have a look at the getSizes-function and check if it works correctly? I have not taken the time to reverse engineer the JS.
If you need some example code to reproduce the issue, let me know. I will try to provide something.
Here is the de-minified version of the getSizes
-function:
getSizes: function (t, e) {
let s, r, i;
if (t.getAttribute("width") && e.width_from_img && t.getAttribute("width").indexOf("%") < 0) {
let e = t.getAttribute("width");
e.indexOf("px") >= 0 && (e = e.replace("px", "")), (s = parseInt(e));
} else {
let n = t.parentElement;
if ((t.nextSibling && "FIGCAPTION" === t.nextSibling.tagName && (n = n.parentElement), e.width_from_flex)) for (; n && n.clientWidth <= 20; ) n = n.parentElement;
else for (; n && n.clientWidth <= 30; ) n = n.parentElement;
n
? (e.width_from_flex && (r = window.getComputedStyle(n)),
e.width_from_flex && r.getPropertyValue("flex-basis") && r.getPropertyValue("flex-basis").includes("px")
? (s = parseInt(r.getPropertyValue("flex-basis").replace("px", "")))
: ((s = n.clientWidth < t.width ? t.width : n.clientWidth), s > window.innerWidth && (s = window.innerWidth)))
: (s = window.innerWidth);
}
for (let t = 0; t < n.length; t++)
if (n[t] - s >= 0) {
i = n[t];
break;
}
return i || (i = n[n.length - 1]), e.min_width && i < e.min_width && (i = e.min_width), { sizes: (100 * s) / window.innerWidth + "vw", width: i };
},
The implementation for the width_from_img
calls getAttribute("width")
which is close to but not exactly what I need. I have a CSS declaration that sets the <img>
-width to 74px
.
I think if the implementation would fallback to t.width
this could already work for me. I changed the gumlet.js by adding 2 lines
With these in place the generated sizes
-Attribute is now closer to what it should be.
Could you forward this to a developer and ask them if they would be able to support my proposed changed?
I currently have to embed this customized javascript snippet to make Gumlet work for my case and would rather have the official Gumlet.js to provide a solution 
We will let you know our teams feedback on this.
Thank you for sharing & Hope your week goes well