Gumlet.js getSizes calculation seems off

Help & Support
1

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:

SCR-20250703-nkvk
SCR-20250703-nkvk1680×1181 63.6 KB

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.

2

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

SCR-20250703-ntzl
SCR-20250703-ntzl1275×136 23.8 KB

With these in place the generated sizes-Attribute is now closer to what it should be.

3

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 :slight_smile:

4

We will let you know our teams feedback on this.
Thank you for sharing & Hope your week goes well

5

Thanks for reporting this. We are aware that we don’t take the width from the actual image. It’s due to issues where many browsers don’t report the correct width of <img> element. We recommend you put CSS width on the parent element like <div>, which should solve the issue for you.

6

Thanks for the response. I am working on a codebase with hundreds of pages displaying hundreds of responsive images. Reworking the CSS is not an economically viable option for us.

Can you go into detail which browsers are having issues with reading the width-Attribute directly?

7

I’d be interested in 1 example Browser (Version + OS) and am not asking for a comprehensible list :slight_smile: