Trying to change behaviour of img-dim setSrcset function

[cozarkd]

Hi, I'm trying to change this function to set sizes that makes sense to my project. I have a big full width/hero image for each post and then a thumbnail (that is the same img) for each post featured in home. So I thought that maybe I could change the code to identify a class like "small" for the thumbnails and work with the fallback for others images.

So my code is like this now:

async function setSrcset(img, src, format) {
  const setInfo = await srcset(src, format);
  img.setAttribute("srcset", setInfo.srcset);
  img.setAttribute(
    "sizes",
    // If the image has the class img-small"
    img.classList.contains("img-small")
    ? "(max-width: 608px) 110px, 164px"
    : "(max-width: 608px) 100vw, 1440px"
  );
  return setInfo.fallback;
}

but it doesn't work at all. I double checked the class on that tag (i have three css classes there). And the img-dim.js file is running because if I change the fallback (: "(max-width: 608px) 100vw, 1440px") it changes in the build.

Any idea why this could not be working? I'm lost.

[cozarkd]

Update: It seems that the script can't get anything from the original <img>. I'm trying now with something like this to get the original sizes in code but it returns null on console.

async function setSrcset(img, src, format) {
  const setInfo = await srcset(src, format);
  img.setAttribute("srcset", setInfo.srcset);
  const originalSizes = img.getAttribute("sizes");

      console.log("originalSizes:", originalSizes);

  img.setAttribute(
  "sizes",
  originalSizes || "(max-width: 608px) 100vw, 1440px"
  );
  return setInfo.fallback;
  }

[DimitryDushkin]

Hey! Same issue. This PR fixes it https://github.com/google/eleventy-high-performance-blog/pull/183 UPDATE: Turned out, it's not. Seems like there is a concurrency issue and sometimes it's fine, sometime it's not.