IMAGE TO BASELINE GRID - want image to align with baseline grid

current v2.js

app.imgBaselineHeight = {
  init: function () {

    function calculateCSSVar(variableName) {
      const tempEl = document.createElement('div');
      tempEl.style.marginTop = `var(${variableName})`;
      tempEl.style.position = 'absolute';
      tempEl.style.visibility = 'hidden';
      document.body.appendChild(tempEl);
      const computedStyle = getComputedStyle(tempEl).marginTop;
      document.body.removeChild(tempEl);
      return parseFloat(computedStyle);
    }

    function updateCssValues() {
      fontsize = calculateCSSVar('--step-0');
      lh = calculateCSSVar('--lh');
      step0PtParaPixelValue = calculateCSSVar('--step-0-pt-para');
      step0PtPixelValue = calculateCSSVar('--step-0-pt');
      window.baselineHeight = fontsize * 1.7;
      updateAllImagesBaseline();
    }

    updateCssValues();

    function updateAllImagesBaseline() {
      var elements = document.querySelectorAll('img:not(.no-lh)');
      elements.forEach(function (element) {
        baselineElement(element, window.baselineHeight);
      });
    }

    function resetImageHeights() {
      var elements = document.querySelectorAll('img:not(.no-lh)');
      elements.forEach(function (element) {
        element.style.height = ''; // Reset the height
      });
    }

    function adjustFooterToBaseline() {
      const footer = document.getElementById('footer');
      if (!footer) {
        console.error('Footer element not found');
        return;
      }

      const currentFooterHeight = footer.offsetHeight;
      const baselineHeight = window.baselineHeight;

      const remainder = currentFooterHeight % baselineHeight;
      const adjustedHeight = remainder === 0 ? currentFooterHeight : currentFooterHeight + baselineHeight - remainder;

      footer.style.height = `${adjustedHeight}px`;
    }

    adjustFooterToBaseline();

    function resetFooterHeight() {
      const footer = document.getElementById('footer');
      if (footer) {
        footer.style.height = '';
      }
    }

    window.addEventListener('resize', debounce(function () {
      updateCssValues();
      resetImageHeights();
      updateAllImagesBaseline();
      resetFooterHeight();
      adjustFooterToBaseline();
    }, 250));
  },
  exit: function () {}
};

function baselineElement(element, baselineHeight) {
  const elementHeight = element.offsetHeight;
  const remainder = elementHeight % baselineHeight;
  const adjustedHeight = remainder === 0 ? elementHeight : elementHeight + baselineHeight - remainder;
  element.style.height = `${adjustedHeight}px`;
}

not-working v3.js

//RAF iterferes with menu on scroll

app.imgBaselineHeight = {
  init: function () {
      function calculateCSSVar(variableName) {
          const tempEl = document.createElement('div');
          tempEl.style.marginTop = `var(${variableName})`;
          tempEl.style.position = 'absolute';
          tempEl.style.visibility = 'hidden';
          document.body.appendChild(tempEl);
          const computedStyle = getComputedStyle(tempEl).marginTop;
          document.body.removeChild(tempEl);
          return parseFloat(computedStyle);
      }

      function updateCssValues() {
          fontsize = calculateCSSVar('--step-0');
          lh = calculateCSSVar('--lh');
          step0PtParaPixelValue = calculateCSSVar('--step-0-pt-para');
          step0PtPixelValue = calculateCSSVar('--step-0-pt');
          window.baselineHeight = fontsize * 1.7;
      }

      function resetImageHeights() {
          var elements = document.querySelectorAll('img:not(.no-lh)');
          elements.forEach(function (element) {
              element.style.height = ''; // Reset the height
          });
      }

      function adjustFooterToBaseline() {
          const footer = document.getElementById('footer');
          if (!footer) {
              console.error('Footer element not found');
              return;
          }

          const currentFooterHeight = footer.offsetHeight;
          const baselineHeight = window.baselineHeight;

          const remainder = currentFooterHeight % baselineHeight;
          const adjustedHeight = remainder === 0 ? currentFooterHeight : currentFooterHeight + baselineHeight - remainder;

          footer.style.height = `${adjustedHeight}px`;
      }

      function resetFooterHeight() {
          const footer = document.getElementById('footer');
          if (footer) {
              footer.style.height = '';
          }
      }

      function baselineElement(element, baselineHeight) {
          return new Promise((resolve) => {
              if (element.complete) {
                  const elementHeight = element.offsetHeight;
                  const remainder = elementHeight % baselineHeight;
                  const adjustedHeight = remainder === 0 ? elementHeight : elementHeight + baselineHeight - remainder;
                  element.style.height = `${adjustedHeight}px`;
                  resolve();
              } else {
                  element.addEventListener('load', function() {
                      const elementHeight = element.offsetHeight;
                      const remainder = elementHeight % baselineHeight;
                      const adjustedHeight = remainder === 0 ? elementHeight : elementHeight + baselineHeight - remainder;
                      element.style.height = `${adjustedHeight}px`;
                      resolve();
                  });
              }
          });
      }

      function updateAllImagesBaseline() {
          var elements = document.querySelectorAll('img:not(.no-lh)');
          return Promise.all(Array.from(elements).map(element => baselineElement(element, window.baselineHeight)));
      }

      function rafBaselineAdjustment() {
          let ticking = false;
          let lastKnownScrollPosition = 0;
          let lastKnownWidth = window.innerWidth;

          function doBaselineAdjustment() {
              updateCssValues();
              resetImageHeights();
              updateAllImagesBaseline().then(() => {
                  resetFooterHeight();
                  adjustFooterToBaseline();
                  ticking = false;
              });
          }

          function requestTick() {
              if (!ticking) {
                  requestAnimationFrame(doBaselineAdjustment);
              }
              ticking = true;
          }

          function onResize() {
              lastKnownWidth = window.innerWidth;
              requestTick();
          }

          function onScroll() {
              lastKnownScrollPosition = window.scrollY;
              requestTick();
          }

          window.addEventListener('resize', debounce(onResize, 250));
          window.addEventListener('scroll', onScroll);

          // Initial call to set up the baseline
          requestTick();
      }

      // Initialize the baseline adjustment
      rafBaselineAdjustment();
  },
  exit: function () {}
}

v1.js

app.imgBaselineHeight = {
  init: function () {

    /* + BASELINE HEIGHTS (baseline-elements.js)
      -----------------------------------------------------------------------
      + <p> = baseline grid (.bgrid)
      ======================================================================*/	
    
      var fontsize, step0PtParaPixelValue, step0PtPixelValue, lh;

    //CALCULATE THE CSS VARIABLES
    function calculateCSSVar(variableName) {
      const tempEl = document.createElement('div');
      tempEl.style.marginTop = `var(${variableName})`;
      tempEl.style.position = 'absolute';
      tempEl.style.visibility = 'hidden';
      document.body.appendChild(tempEl);
      const computedStyle = getComputedStyle(tempEl).marginTop;
      document.body.removeChild(tempEl);
      return parseFloat(computedStyle);
    }
    
    function updateCssValues() {
      fontsize = calculateCSSVar('--step-0');
      lh = calculateCSSVar('--lh');
      step0PtParaPixelValue = calculateCSSVar('--step-0-pt-para');
      step0PtPixelValue = calculateCSSVar('--step-0-pt');
      window.baselineHeight = fontsize * 1.7;

     // console.log('Updated baselineHeight:', window.baselineHeight);
      updateAllImagesBaseline();
    }
    
    updateCssValues();
    
   
    /* + RECALCULATE IMAGE HEIGHT AND SET TO BASELINE GRID
      ======================================================================*/	
    function updateAllImagesBaseline() {
      var elements = document.querySelectorAll('img:not(.no-lh)');
      elements.forEach(function(element) {
        baselineElement(element, window.baselineHeight);
      });
    }
    
    function resetImageHeights() {
      var elements = document.querySelectorAll('img:not(.no-lh)');
      elements.forEach(function(element) {
        element.style.height = ''; // Reset the height
      });
    }



    /* + CALCULATE FOOTER HEIGHT (add top margin to match baseline grid)
      ======================================================================*/


    function adjustFooterToBaseline() {
      const footer = document.getElementById('footer');
      if (!footer) {
        console.error('Footer element not found');
        return;
      }
    
      const currentFooterHeight = footer.offsetHeight;
      const baselineHeight = window.baselineHeight;
    
      // Calculate the required height to fit the baseline grid
      const remainder = currentFooterHeight % baselineHeight;
      const adjustedHeight = remainder === 0 ? currentFooterHeight : currentFooterHeight + baselineHeight - remainder;
    
      // Apply the calculated height to the footer
      footer.style.height = `${adjustedHeight}px`;
    }
    
    // Initial adjustment
    adjustFooterToBaseline();
    

    function resetFooterHeight() {
      if (footer) {
      footer.style.height = '';
      }
    }

    // Adjust footer height on window resize
//    window.addEventListener('resize', adjustFooterToBaseline);

    
    window.addEventListener('resize', debounce(function() {
      updateCssValues();
      resetImageHeights();
      updateAllImagesBaseline();
      resetFooterHeight();
      adjustFooterToBaseline();
      // resetFooterHeight();
      // adjustFooterHeight();
    }, 250));
    

  },
  exit: function () {
    
  }
};

function baselineElement(element, baselineHeight) {
  const elementHeight = element.offsetHeight;
  const remainder = elementHeight % baselineHeight;
  const adjustedHeight = remainder === 0 ? elementHeight : elementHeight + baselineHeight - remainder;
  element.style.height = `${adjustedHeight}px`;
}