pea_cache with channel images

Hi, just wondering if pea_cache works with channel images or is this something that can be done.

I have a large site where I am using pea and the pea cache function throughout.

1 issue I am having is with using pea cache when a product has multiple images. I have been using channel images for this and have never been able to get pea to work with it so I have just been using normal jpg or png images however for optimisation I would like to be able to use it with channel images.

I have an image gallery built with thumbnails that I would like to be able to get working with pea & pea cache I will list the code below for reference.

<div class="gallery-container">
  <div class="main-img">

    <picture id="current">
        <source srcset="{exp:pea:webp src='{product_detail_image}'}" type="image/webp">
        <img src="{product_detail_image}" alt="{title}" alt="{title}">
    </picture>
  </div>

  <div class="imgs">
    {product_multiple_images}

    <picture>
        <source srcset="{exp:pea:webp src='{image:url}'}" type="image/webp">
         <img src="{image:url}" alt="{title}">
    </picture>
    {/product_multiple_images}
  </div>
</div>

<script>

const current = document.querySelector('#current');
    const imgs = document.querySelector('.imgs');
    const img = document.querySelectorAll('.imgs picture source');
    const opacity = 1;

    // Set first img opacity
    img[0].style.opacity = opacity;

    imgs.addEventListener('click', imgClick);

    function imgClick(e) {
        // Reset the opacity
        img.forEach(img => (img.style.opacity = 1));

        // Change current image to src of clicked image
        current.innerHTML = ''; // Clear the current picture element
        const clickedPicture = e.target.closest('picture');
        const source = clickedPicture.querySelector('source').cloneNode();
        const imgTag = clickedPicture.querySelector('img').cloneNode();
        current.appendChild(source);
        current.appendChild(imgTag);

        // Add fade in class
        current.classList.add('fade-in');

        // Remove fade-in class after .5 seconds
        setTimeout(() => current.classList.remove('fade-in'), 500);

        // Change the opacity to opacity var
        e.target.style.opacity = opacity;
    }

</script>

Any help would be greatly appreciated, Thanks, John

meatpaste / ee-pea-docs

pea_cache with channel images #2