pea_cache with channel images

[johncondy]

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]

this could be a parse order issue, you could try putting the <source tag into an embed and pass the URL to it via the embed instead of nesting the tags. essentially Pea receives a URL and returns a thumbnail so it is capable of working with any other plugin as long as it receives the URL